JS ブラウザの動作とイベントをキャンセルする方法効かない時の対処方法

今回は、イベントを実行する際に「動作をキャンセルする」方法について見ていきましょう。

キャンセルする方法は大きく分けて2種類あり、「ブラウザのデフォルトの動作をキャンセルする」方法と、「イベントが伝わるのをキャンセルする」方法があります。

ここでの「ブラウザのデフォルトの動作」とは、マウスイベントなどで、クリックしたら別のURLに移動したり、送信ボタンでサーバーにデータを送ったりする動作のことを指します。

「イベントが伝わる」と言うのは、バブリングのことを指します。

どちらも実際に使用する頻度は稀だと思うのですが、状況によっては、こういった動作が不要な場合があります。

その際に、動作が発生しないようにするにはどうしたら良いのかを見ていきましょう。

ブラウザのデフォルトの動作をキャンセルする
1. event.preventDefault()
イベントが伝わるのをキャンセルする
1. event.stopPropagation()
2. event.stopImmediatePropagation()
あとがき

ブラウザのデフォルトの動作をキャンセルする

event.preventDefault()

    <div class="fruits">
      <input type="checkbox" id="check1" />
      <label for="check1">りんご</label>
      <input type="checkbox" id="check2" />
      <label for="check2">バナナ</label>
      <input type="checkbox" id="check3" />
      <label for="check3">みかん</label>
    </div>

let checkStop = document.getElementById('check2');

checkStop.addEventListener('click', function (event) {
  event.preventDefault();
});

りんごバナナみかん

チェックボックスが３つ表示されていますが、2番目のバナナはチェックが入らないようになっています。

      <a
        href="https://hitoridemanabou.net/"
        onclick="event.preventDefault()"
        class="clickLink"
        >ここをクリック</a
      >
      <a
        href="https://hitoridemanabou.net/"
        onclick="return false"
        class="clickLink"
        >ここをクリック</a
      >

ここをクリックここをクリック

「on+event」の場合は、「return false」でも動作をキャンセルすることが出来ます。

どちらをクリックしてもリンクされないようになっています。

イベントが伝わるのをキャンセルする

event.stopPropagation()

div1

div2

div3

このボックスは前回ご紹介したものと同じです。

中央の「div3」をクリックすると、「div2」、「div1」に設定したイベントが実行されます。

div1

div2

div3

こちらは「addEventListner」を使って書いています。

コードは以下になります。

    <div class="div1" id="stop1">
      div1
      <div class="div2" id="stop2">
        div2
        <div class="div3" id="stop3">div3</div>
      </div>
    </div>

let prop1 = document.getElementById('stop1');
prop1.addEventListener('click', function () {
  alert('div1');
});

let prop2 = document.getElementById('stop2');
prop2.addEventListener('click', function (event) {
  alert('div2');
  event.stopPropagation();
});

let prop3 = document.getElementById('stop3');
prop3.addEventListener('click', function () {
  alert('div3');
});

「div2」に、「event.stopPropagation()」を使ってイベントを止めています。

そのため、「div3」をクリックすると、「div2」で止まります。

「div2」をクリックすると、「div2」で終わります。

このように「event.stopPropagation()」を設定するとバブリングが止まっているのが分かると思います。

event.stopImmediatePropagation()

div1

div2

div3

    <div class="div1" id="act1">
      div1
      <div class="div2" id="act2">
        div2
        <div class="div3" id="act3">div3</div>
      </div>
    </div>

let actStop1 = document.getElementById('act1');
actStop1.addEventListener('click', function () {
  alert('div1');
  alert('new div1');
});

let actStop2 = document.getElementById('act2');
actStop2.addEventListener('click', function (event) {
  alert('div2');
  event.stopPropagation();
});

actStop2.addEventListener('click', function () {
  alert('new div2');
});

let actStop3 = document.getElementById('act3');
actStop3.addEventListener('click', function () {
  alert('div3');
  alert('new div3');
});

今度は各要素に2つずつイベントが設定されています。

最初の例では、先程ご紹介した、「event.stopPropagation()」を設定した場合を見てみましょう。

「div3」をクリックすると、「div3」、「new div3」、「div2」、「new div2」とアラートが表示され、「div1」と「new div1」は表示されません。

バブリングが「div2」で止まったのが分かると思います。

それでは次の例を見てみましょう。

div1

div2

div3

    <div class="div1" id="actnew1">
      div1
      <div class="div2" id="actnew2">
        div2
        <div class="div3" id="actnew3">div3</div>
      </div>
    </div>

let actNewStop1 = document.getElementById('actnew1');
actNewStop1.addEventListener('click', function () {
  alert('div1');
  alert('new div1');
});

let actNewStop2 = document.getElementById('actnew2');
actNewStop2.addEventListener('click', function (event) {
  alert('div2');
  event.stopImmediatePropagation();
});

actNewStop2.addEventListener('click', function () {
  alert('new div2');
});

let actNewStop3 = document.getElementById('actnew3');
actNewStop3.addEventListener('click', function () {
  alert('div3');
  alert('new div3');
});

ここでは、「event.stopImmediatePropagation()」を設定しています。

「div3」をクリックすると、「div3」、「new div3」、「div2」まで表示されたら以降は表示されません。

「event.stopImmediatePropagation()」が設定された場所ですぐに動作が止まっているのが分かると思います。

先程の、「event.stopPropagation()」との違いを確認してください。