jQueryのclickイベントで親と子が同時に対象になった場合に子だけ取得する方法

jQueryのclickを使って何かがクリックされたら処理をするようなコードを作成したとします。

そのとき、セレクタが親子で同じ場合両方とも処理されてしまいます。

複数取得できた場合は子要素だけ取得したいときの書き方を紹介します。

 

ちょっとどういう場合か分かりにくいですよね?

次に具体的にどんな場合か紹介します。

jQueryのclickイベントで親子とも取得できる例

こんな書き方することあるか??ってのは抜きでお願いします。

極端な例ですが div タグをクリックしたら動き出すjQueryの処理があった場合、以下のように書くと子(.inner)をクリックした場合、親(#area1)も処理されてしまいます。

つまり2回処理が流れるということです。

1回目はポップアップで「エリア1」と表示されます。

2回目はポップアップで「<div class=”inner”>エリア1</div>」と表示されます。

 

子要素の外側で、親要素の内側をクリックした場合に「<div class=”inner”>エリア1</div>」と出るのは構わないのですが、子要素をクリックした場合は「エリア1」だけを表示したいです。

jQueryのclickイベントで親と子が同時に対象になった場合に子だけ取得する方法

解決策は簡単で、click処理の最後に return false; を追加するだけです。

これで子要素をクリックした場合に、2回目の「<div class=”inner”>エリア1</div>」という表示はなくなります。

 

試しに作ってみました。

青い部分をクリックしてみてください。

まとめ

jQueryのclickを使う場合、指定したセレクタが親子で同じ場合は両方処理される。

子要素だけ処理したい場合は、return false;を追加する。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA