イベント処理をキャンセルする方法
イベント処理をキャンセルするためには、下記メソッドのいづれかを使用します。
- preventDefault
- stopPropagation
- stopImmediatePropagation
preventDefault
defaultのイベントをキャンセルします。
JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。
例えば、ボタンのクリック、フォームへの入力、ページの読み込み、マウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。
引用元：(https://www.sejuku.net/blog/61631)
stopPropagation
イベント発生元の親要素にイベントがあれば、親要素のイベントの実行をキャンセルします。
イベント発生元のみを実行したいときに、使用します。
stopImmediatePropagation
イベント発生元と同じ要素に複数のイベントがあったときに、イベント発生元以降のイベントの実行をキャンセルします。
defaultのイベントのみ実行したいときに、使用します。
サンプルで検証
各メソッドの違いを確認するために、サンプルを用意しました。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScriptでイベント処理をキャンセルするメソッド3選</title>
</head>
<body>
<div id="parent">
<p>JavaScriptでイベント処理をキャンセルするメソッド3選</p>
<p>
<a id="child" href="https://qiita.com/tamakiiii/items/f47e38bb8f03ef92f298">JavaScriptでイベント処理をキャンセルするメソッド3選ページへ</a>
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function() {
$('#child').click(function(e) {
window.alert('#childイベント1が呼び出されました。');
//e.preventDefault();
//e.stopPropagation();
//e.stopImmediatePropagation();
});
$('#inside').click(function(e) {
window.alert('#childイベント2が呼び出されました。');
});
$('#outside').click(function(e) {
window.alert('#parentイベントが呼び出されました。');
});
});
</script>
</body>
</html>
preventDefaultを実行した場合
以下のような順番でイベントが発生する。
stopPropagationを実行した場合
以下のような順番でイベントが発生する。
stopImmediatePropagationを実行した場合
以下のような順番でイベントが発生する。