iPentec.com  /  Doc  /  JavaScript

目次

イベントのキャンセル preventDefault stopPropagation の違い - JavaScript

JavaScriptのイベントのキャンセル処理であるpreventDefault stopPropagation の違いを紹介します。

概要

preventDefault, stopPropagation, stopImmediatePropagation メソッドにより、イベント処理の中断ができます。この記事では、イベント所のキャンセル時の動作やpreventDefault, stopPropagationの動作の違いを紹介します。

まとめ:動作の違い

先に結論を紹介します。動作をまとめると以下になります。
タグのclickイベントaddEventListenerで設定されたイベントリスナaddEventListenerで設定された2つ目のイベントリスナ外枠のclickイベント外枠のaddEventListenerで設定されたイベントリスナページ遷移
指定なし〇〇〇〇〇〇
preventDefault〇〇〇〇〇×
stopPropagation〇〇〇××〇
stopImmediatePropagation〇〇×××〇

テストプログラム

イベント処理の中断の無い下記のHTMLファイルを作成します。

コード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    #frame {
      width: 250px;
      height: 64px;
      border: solid 1px #ff6a00;
      background-color: #E0E0E0;
    }
    -->
  </style>
  <script type="text/javascript">
    function load() {
      var elem = document.getElementById('link');
      elem.addEventListener('click', Event01);
      elem.addEventListener('click', Event02);

      var elem = document.getElementById('frame');
      elem.addEventListener('click', Event03);
    }

    function Event01(e) {
      alert('Event01 が呼び出されました');
    }

    function Event02(e) {
      alert('Event02 が呼び出されました');
    }

    function Event03(e) {
      alert('Event03 が呼び出されました');
    }

    function Event04(e) {
      alert('Event04 が呼び出されました');
    }

    function Event05(e) {
      alert('Event05 が呼び出されました');
    }
  </script>
</head>
<body onload="load();">
  <div id="frame" onclick="Event04();">
    <a id="link" href="http://www.ipentec.com" onclick="Event05();">リンク</a>
  </div>
  <div id="output"></div>
</body>
</html>

実行結果

Webブラウザで上記のHTMLファイルを開きます。下図の画面が表示されます。
[リンク]をクリックします。


最初にリンクのAタグのclickイベントに設定された "Event05"が呼び出されます。下図のアラートダイアログが表示されます。


続いてaddEventListenerでリンクに割り当てたclickイベントの "Event01"が呼び出されます。下図のアラートダイアログが表示されます。


addEventListenerでリンクに割り当てたclickイベントの "Event02"が呼び出されます。下図のアラートダイアログが表示されます。


リンクを囲むdiv枠のclickイベントに設定された "Event04"が呼び出されます。下図のアラートダイアログが表示されます。


addEventListenerでリンクを囲むdiv枠のclickイベントに設定された "Event03"が呼び出されます。下図のアラートダイアログが表示されます。


ページ遷移が実行され、ページが切り替わります。

プログラム:preventDefault を実行する例

コード

下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    #frame {
      width: 250px;
      height: 64px;
      border: solid 1px #ff6a00;
      background-color: #E0E0E0;
    }
    -->
  </style>
  <script type="text/javascript">
    function load() {
      var elem = document.getElementById('link');
      elem.addEventListener('click', Event01);
      elem.addEventListener('click', Event02);

      var elem = document.getElementById('frame');
      elem.addEventListener('click', Event03);
    }

    function Event01(e) {
      e.preventDefault();
      alert('Event01 が呼び出されました');
    }

    function Event02(e) {
      alert('Event02 が呼び出されました');
    }

    function Event03(e) {
      alert('Event03 が呼び出されました');
    }

    function Event04(e) {
      alert('Event04 が呼び出されました');
    }

    function Event05(e) {
      alert('Event05 が呼び出されました');
    }
  </script>
</head>
<body onload="load();">
  <div id="frame" onclick="Event04();">
    <a id="link" href="http://www.ipentec.com" onclick="Event05();">リンク</a>
  </div>
  <div id="output"></div>
</body>
</html>

解説

Event01 内で preventDefault メソッドを呼び出しています。
    function Event01(e) {
      e.preventDefault();
      alert('Event01 が呼び出されました');
    }

実行結果

動作を確認します。上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
[リンク]をクリックします。


最初にリンクのAタグのclickイベントに設定された "Event05"が呼び出されます。下図のアラートダイアログが表示されます。


続いてaddEventListenerでリンクに割り当てたclickイベントの "Event01"が呼び出されます。下図のアラートダイアログが表示されます。


addEventListenerでリンクに割り当てたclickイベントの "Event02"が呼び出されます。下図のアラートダイアログが表示されます。


リンクを囲むdiv枠のclickイベントに設定された "Event04"が呼び出されます。下図のアラートダイアログが表示されます。


addEventListenerでリンクを囲むdiv枠のclickイベントに設定された "Event03"が呼び出されます。下図のアラートダイアログが表示されます。


ページ遷移は実行されず、同じ画面のままです。


preventDefault を実行するとページ遷移の処理は中断されますが、他のイベントリスナーは通常と同じ動作で実行されます。

プログラム : stopPropagation を実行する例

コード

下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    #frame {
      width: 250px;
      height: 64px;
      border: solid 1px #ff6a00;
      background-color: #E0E0E0;
    }
    -->
  </style>
  <script type="text/javascript">
    function load() {
      var elem = document.getElementById('link');
      elem.addEventListener('click', Event01);
      elem.addEventListener('click', Event02);

      var elem = document.getElementById('frame');
      elem.addEventListener('click', Event03);
    }

    function Event01(e) {
      e.stopPropagation();
      alert('Event01 が呼び出されました');
    }

    function Event02(e) {
      alert('Event02 が呼び出されました');
    }

    function Event03(e) {
      alert('Event03 が呼び出されました');
    }

    function Event04(e) {
      alert('Event04 が呼び出されました');
    }

    function Event05(e) {
      alert('Event05 が呼び出されました');
    }
  </script>
</head>
<body onload="load();">
  <div id="frame" onclick="Event04();">
    <a id="link" href="http://www.ipentec.com" onclick="Event05();">リンク</a>
  </div>
  <div id="output"></div>
</body>
</html>

解説

Event01 内で stopPropagation メソッドを呼び出しています。
    function Event01(e) {
      e.stopPropagation();
      alert('Event01 が呼び出されました');
    }

実行結果

動作を確認します。上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
[リンク]をクリックします。


最初にリンクのAタグのclickイベントに設定された "Event05"が呼び出されます。下図のアラートダイアログが表示されます。


続いてaddEventListenerでリンクに割り当てたclickイベントの "Event01"が呼び出されます。下図のアラートダイアログが表示されます。


addEventListenerでリンクに割り当てたclickイベントの "Event02"が呼び出されます。下図のアラートダイアログが表示されます。


ページ遷移が実行され、ページが切り替わります。


stopPropagation メソッドを呼び出すと、リンクを包含する要素のイベントが実行されない動作となります。リンク自体のページ遷移は実行されます。

プログラム : stopImmediatePropagation を実行する例

コード

下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <style>
    <!--
    #frame {
      width: 250px;
      height: 64px;
      border: solid 1px #ff6a00;
      background-color: #E0E0E0;
    }
    -->
  </style>
  <script type="text/javascript">
    function load() {
      var elem = document.getElementById('link');
      elem.addEventListener('click', Event01);
      elem.addEventListener('click', Event02);

      var elem = document.getElementById('frame');
      elem.addEventListener('click', Event03);
    }

    function Event01(e) {
      e.stopImmediatePropagation();
      alert('Event01 が呼び出されました');
    }

    function Event02(e) {
      alert('Event02 が呼び出されました');
    }

    function Event03(e) {
      alert('Event03 が呼び出されました');
    }

    function Event04(e) {
      alert('Event04 が呼び出されました');
    }

    function Event05(e) {
      alert('Event05 が呼び出されました');
    }
  </script>
</head>
<body onload="load();">
  <div id="frame" onclick="Event04();">
    <a id="link" href="http://www.ipentec.com" onclick="Event05();">リンク</a>
  </div>
  <div id="output"></div>
</body>
</html>

解説

Event01 内で stopImmediatePropagation メソッドを呼び出しています。
    function Event01(e) {
      e.stopImmediatePropagation();
      alert('Event01 が呼び出されました');
    }

実行結果

動作を確認します。上記のHTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
[リンク]をクリックします。


最初にリンクのAタグのclickイベントに設定された "Event05"が呼び出されます。下図のアラートダイアログが表示されます。


続いてaddEventListenerでリンクに割り当てたclickイベントの "Event01"が呼び出されます。下図のアラートダイアログが表示されます。


ページ遷移が実行されます。


stopImmediatePropagation メソッドを呼び出すと、リンクを包含する要素のイベントが実行されない動作となり、かつ、リンクに設定された同じ種類のイベントリスナーは1つしか実行されない動作になります。
著者
Penta
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用

関連するページ

最終更新日: 2023-12-26
改訂日: 2023-12-26
作成日: 2017-03-30
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.