イベント処理をキャンセルする方法

イベント処理をキャンセルするためには、下記メソッドのいづれかを使用します。

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を実行した場合

　以下のような順番でイベントが発生する。

・childイベント1

・childイベント2

・parentイベント3

stopPropagationを実行した場合

　以下のような順番でイベントが発生する。

・childイベント1

・childイベント2

・リンクに従って別のページへ移動

stopImmediatePropagationを実行した場合

　以下のような順番でイベントが発生する。

・childイベント1

・リンクに従って別のページへ移動

参考

【JavaScript入門】イベント処理のキャンセル方法
イベント処理を中断するには？（preventDefault／stopPropagation／stopImmediatePropagation）
【JavaScript入門】初心者でも分かるイベント処理の作り方まとめ！