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で確認できます。

🎂 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)