event.preventDefault()メソッドで、a要素（アンカー要素）のクリックイベントのデフォルトの動作を停止し、指定した関数は呼び出すが、リンク先は開かないようにするJavaScriptサンプル。
サンプル（実装例）
サンプル 1
実装例の動作について
- 「サンプル」をクリックすると、右横の数字をカウントアップする。
- 「サンプル」はa要素だが、href属性に指定したリンク先は開かない。
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sampleA" ).onclick = function( $event ){
sampleFn();
$event.preventDefault();
};
}
function sampleFn(){
var $count = document.getElementById( "sampleOutput" ).innerHTML;
document.getElementById( "sampleOutput" ).innerHTML = ++$count;
}
</script>
window.onload = function () {
document.getElementById( "sampleA" ).onclick = function( $event ){
sampleFn();
$event.preventDefault();
};
}
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( $event ){
// ユーザー定義関数「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属性値が「sampleA」のa要素をクリックした時の処理
document.getElementById( "sampleA" ).onclick = function( $event ){
// ユーザー定義関数「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>
主に使用した構文、プロパティ、メソッド、イベント等。