「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>

実行結果
e.preventDefault でデフォルトのイベントをキャンセルしているためgoogleサイトに遷移しない。
コンソールにメッセージ 「’google文字リンクがクリックされました。」が出力されます。

JavaScript

Posted by arkgame