1. アドベネック
  2. アドベネックのブログ
  3. HTML
  4. jQuery 親要素に設定したイベントが子要素でも発火してしまう時

Posted on Jul 28, 2016 by Naitou

jQuery 親要素に設定したイベントが子要素でも発火してしまう時

記事カテゴリー: HTML

親要素ではイベントを発火させたい、子要素ではイベントを発火させたくない。
よく使いますがよく忘れるので健忘録を兼ねて。

親要素でのみ発火するイベントとはどういう時につかうイベントか

たとえば、ポップアップウィンドウのウィンドウの外をクリックした時。
ウィンドウの外側をクリックした時、ポップアップウィンドウを閉じたい。
ウィンドウの内側をクリックした時、ポップアップウィンドウは開いたままでいたい。

しかし、ポップアップ全体をクリックした時に閉じるイベントを設定すると、親要素のイベントは子要素でも発火します。
子要素も親要素に含まれる、親要素の一部だからです。

js_pop_1

子要素では親要素のイベントを発火させない為に

イベントに条件式を追加します。
イベントが発火した要素のイベントオブジェクトを取得し、
「イベントが発火した要素のid名が親要素と一致する時のみ、ポップアップウィンドウを閉じたい。」と書き換えます。

js_pop_2

これで子要素をクリックしても、子要素が持つid名は親要素のid名と一致しないので、イベントは発火しません。

この記事をシェアする

このカテゴリーの一覧に戻る

内藤

この記事の投稿者

内藤Naitou

高専、専門学校卒という独学派が多いアドベネックの中で唯一コンピューター言語を学校で学んだスタッフでありながら、ペンタブレットを使ったイラスト作成なども担当できるレアキャラ。NINTENDO好き。ゲームを買って積んでおくのが趣味。

  • Ps
  • Ai
  • Dw

同じカテゴリーの投稿

最近の投稿

記事のカテゴリー

アドベネックのSNS