a要素（アンカー要素）のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。
event.preventDefault()メソッドで、デフォルトの動作を停止する方法もある。
関数を呼び出すだけであれば、a要素にhref属性を指定せず、見た目はスタイルシートで調整するという手もある。そもそも、a要素にこだわる必要もないが…。
サンプル（実装例）
サンプル 1
実装例の動作について
- 「サンプル」をクリックすると、右横の数字をカウントアップする。
- 「サンプル」はa要素だが、href属性に指定したリンク先は開かない。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleA" ).onclick = function(){
sampleFn();
return false;
};
}
function sampleFn(){
var $count = document.getElementById( "sampleOutput" ).innerHTML;
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
window.onload = function () {
document.getElementById( "sampleA" ).onclick = function(){
sampleFn();
return false;
};
}
function sampleFn(){
var $count = document.getElementById( "sampleOutput" ).innerHTML;
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
HTML
<p>
<a id="sampleA" href="#">サンプル</a>
<span id="sampleOutput" style="margin-left: 10px;">1</span>
</p>
<a id="sampleA" href="#">サンプル</a>
<span id="sampleOutput" style="margin-left: 10px;">1</span>
</p>
解説
JavaScript
<script type="text/javascript">
// ページ読み込み時に実行
window.onload = function () {
// id属性値が「sampleA」のa要素をクリックした時の処理
document.getElementById( "sampleA" ).onclick = function(){
// ユーザー定義関数「sampleFn()」を呼び出す
sampleFn();
// クリックイベント処理を停止
return false;
};
}
// ユーザー定義関数「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属性値が「sampleA」のa要素をクリックした時の処理
document.getElementById( "sampleA" ).onclick = function(){
// ユーザー定義関数「sampleFn()」を呼び出す
sampleFn();
// クリックイベント処理を停止
return false;
};
}
// ユーザー定義関数「sampleFn()」
function sampleFn(){
// id属性値が「sampleOutput」のa要素で括った数を取得し、変数「$count」に代入
var $count = document.getElementById( "sampleOutput" ).innerHTML;
// 変数「$count」をカウントアップし、id属性値が「sampleOutput」のa要素内に表示
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
主に使用した構文、プロパティ、メソッド、イベント等。