JavaScript event.preventDefaultについて


JavaScriptのevent.preventDefaultはHTMLのリンクやチェックボックスなどによるイベントをキャンセルするメソッドです。

😸 イベントの伝搬(パブリング)とは

  • クリックなどのイベントは子要素から親要素に伝搬される
  • event.preventDefaultはその要素のイベントをキャンセルする

🏀 サンプル

HTML内で次のようなリンクが存在したとします。

<p><a href="#" class="js-link-trigger">cilck</a></p>

このリンクによる画面の遷移をキャンセルするためのJavaScriptは次のとおりです。

$('.js-link-trigger').on('click', function(e) {
e.preventDefault();
alert("stop link event");
});

すでにevent.preventDefaultが呼び出されている場合はevent.isDefaultPreventedで確認できます。

🐯 参考リンク

📚 おすすめの書籍