WEB制作者向け無料テーマ「Arkhe」をリリースしました

子要素のクリックイベントが親要素へ伝搬(バブリング)するのを防ぐコード

親と子の要素それぞれにクリックイベントが設定されていると、親要素のクリックによって親と子の両方のイベントが発火してしまうことがある。

それ(イベントのハブリングと言うらしい)を防ぐのがstopPropagation()

子要素側のクリックイベントの頭に記述すればOK

childElem.addEventListener( 'click',  function (e)  {
    e.stopPropagation();
    //処理...
});

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次
WordPressテーマ SWELLWordPressテーマ SWELL