event.preventDefault()メソッドで、リンク先URLの末尾が「#」である複数のa要素(アンカー要素)のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。
サンプル(実装例)
実装例の動作について
- 「サンプル1」「サンプル2」「サンプル3」をクリックすると、右横の数字をカウントアップする。
- 「サンプル1」「サンプル2」「サンプル3」はa要素だが、href属性に指定したリンク先は開かない。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
var $sampleAnchors = document.getElementById( "sample" ).getElementsByTagName( "a" );
for( var $i=0; $i < $sampleAnchors.length; $i++ ){
$sampleAnchors[$i].onclick = function( $event ){
if( this.href.match( /#$/ ) ){
sampleFn();
$event.preventDefault();
}
};
}
}
function sampleFn(){
var $count = document.getElementById( "sampleOutput" ).innerHTML;
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
window.onload = function () {
var $sampleAnchors = document.getElementById( "sample" ).getElementsByTagName( "a" );
for( var $i=0; $i < $sampleAnchors.length; $i++ ){
$sampleAnchors[$i].onclick = function( $event ){
if( this.href.match( /#$/ ) ){
sampleFn();
$event.preventDefault();
}
};
}
}
function sampleFn(){
var $count = document.getElementById( "sampleOutput" ).innerHTML;
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
HTML
<p id="sample">
<a href="#">サンプル1</a>
<a href="#">サンプル2</a>
<a href="#">サンプル3</a>
<span id="sampleOutput" style="margin-left: 10px;">1</span>
</p>
<a href="#">サンプル1</a>
<a href="#">サンプル2</a>
<a href="#">サンプル3</a>
<span id="sampleOutput" style="margin-left: 10px;">1</span>
</p>
解説
JavaScript
<script type="text/javascript">
// ページ読み込み時に実行
window.onload = function () {
// id属性値が「sample」の要素内のa要素への参照を配列変数「$sampleAnchors」に代入
var $sampleAnchors = document.getElementById( "sample" ).getElementsByTagName( "a" );
// 配列変数「$sampleAnchors」の要素数分ループ処理
for( var $i=0; $i < $sampleAnchors.length; $i++ ){
// 配列変数「$sampleAnchors」に格納したa要素をクリックした時の処理
$sampleAnchors[$i].onclick = function( $event ){
// リンク先URLの末尾が「#」であれば
if( this.href.match( /#$/ ) ){
// ユーザー定義関数「sampleFn()」を呼び出す
sampleFn();
// デフォルトの動作を停止
$event.preventDefault();
}
};
}
}
// ユーザー定義関数「sampleFn()」
function sampleFn(){
// id属性値が「sampleOutput」のa要素で括った数を取得し、変数「$count」に代入
var $count = document.getElementById( "sampleOutput" ).innerHTML;
// 変数「$count」をカウントアップし、id属性値が「sampleOutput」のa要素内に表示
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
// ページ読み込み時に実行
window.onload = function () {
// id属性値が「sample」の要素内のa要素への参照を配列変数「$sampleAnchors」に代入
var $sampleAnchors = document.getElementById( "sample" ).getElementsByTagName( "a" );
// 配列変数「$sampleAnchors」の要素数分ループ処理
for( var $i=0; $i < $sampleAnchors.length; $i++ ){
// 配列変数「$sampleAnchors」に格納したa要素をクリックした時の処理
$sampleAnchors[$i].onclick = function( $event ){
// リンク先URLの末尾が「#」であれば
if( this.href.match( /#$/ ) ){
// ユーザー定義関数「sampleFn()」を呼び出す
sampleFn();
// デフォルトの動作を停止
$event.preventDefault();
}
};
}
}
// ユーザー定義関数「sampleFn()」
function sampleFn(){
// id属性値が「sampleOutput」のa要素で括った数を取得し、変数「$count」に代入
var $count = document.getElementById( "sampleOutput" ).innerHTML;
// 変数「$count」をカウントアップし、id属性値が「sampleOutput」のa要素内に表示
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
主に使用した構文、プロパティ、メソッド、イベント等。