「JavaScript」preventDefaultメソッドでイベントをキャンセルする
環境
Google Chrome 102.0.5005.63
Windows 10 Home 64bit
構文
preventDefault
要素に設定されている、デフォルトのイベント（動作）をキャンセルします。
使用例
<!DOCTYPE html>
<html>
<body>
<a id="gglink" href="https://www.google.co.jp/" >googleサイト</a>
<script>
document.getElementById("gglink").addEventListener('click', function(e){
console.log('google文字リンクがクリックされました。');
// デフォルトのイベントをキャンセル
e.preventDefault();
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<a id="gglink" href="https://www.google.co.jp/" >googleサイト</a>
<script>
document.getElementById("gglink").addEventListener('click', function(e){
console.log('google文字リンクがクリックされました。');
// デフォルトのイベントをキャンセル
e.preventDefault();
}, false);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<a id="gglink" href="https://www.google.co.jp/" >googleサイト</a>
<script>
document.getElementById("gglink").addEventListener('click', function(e){
console.log('google文字リンクがクリックされました。');
// デフォルトのイベントをキャンセル
e.preventDefault();
}, false);
</script>
</body>
</html>
実行結果
e.preventDefault でデフォルトのイベントをキャンセルしているためgoogleサイトに遷移しない。
コンソールにメッセージ 「’google文字リンクがクリックされました。」が出力されます。