読者です 読者をやめる 読者になる 読者になる

Milk+ea

Weblog Is My Hobby.

stopPropagationを使って親要素へイベントを伝えなくする

JavaScript

f:id:totora0155:20140813201103p:plain

event.stopPropagation?

子要素から親要素へイベントが伝わるのを止めることができます。

例えば、次のような Parent要素 > Child要素な関係の場合。

See the Pen 20140813-1 by nju33 (@nju33) on CodePen.

Child要素をクリックした時に何かしたいと思っています。ですが、実際にクリックしてみると、child!の後にparent!と2回アラートが表示されてしまいます。
これは、Parent要素にもクリックした時にイベントが起きるようになっているからです。

「う~ん、どうしてもParent要素のイベントは起こしたくない。。」

そこで出番なのが、event.stopPropagationです。


伝播ストップ

Child要素がクリックされた時に、event.stopPropagationが実行されるよう改良しました。

See the Pen 20140813-2 by nju33 (@nju33) on CodePen.

実際にクリックしてみると、child!と1回しかアラートされないことが分かると思います!


Child要素でfalseに変えたのに、Parent要素でtrueに戻されちゃう。結果、「なんでぇぇ」みたいなことがたまにあるので覚えておきたいです。