自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。この広告は、90日以上更新していないブログに表示しています。ー親要素で発火するイベントを特定の子孫では解除したいーこんにちは、マリンです。今回はJSでのイベントを発火させる要素の特定です。親要素で指定するが、特定の子孫要素では実行してほしくない。子孫要素でのやり方がイマイチよくわからず。そこで今回はイベントオブジェクトを使ってこれを実装しました。皆様ぜひ教えてください。詳細サンプルコード詳細解説まとめ概要tableの概要を記述したtrをクリックした時、詳細の列が表示されるようにする。trの中には承認ボタンがある。hideが実行されてしまう。以上のことから、子要素のボタンだけクリックイベントを外したいわけです。最初は:notなどを使って特定しようとしたのですが、うまくボタンだけを取ることが出きませんでした。そこで、イベントオブジェクトを使ってみました。詳細サンプルコードまずは解説に使うサンプルコードを記載しておきます。</table></form>上段のtrが表示されている行。下段のtrが非表示部分で、上段をクリックすると表示されます。上段3つ目のカラムにあるボタンだけはクリックの対象外にします。以下が今回のCoffeeです。retrun詳細解説HTMLは省略します。$(e.target)まずは最初の2行です。1行目は上段trへのクリックイベントで、引数eがイベントオブジェクトです。2行目はイベントが発生したjQueryオブジェクトを変数に入れています。targetの中身は以下のようになっています。returnif文でイベントが発生した要素がボタンだったら何もしないで終了させています。if文の内容と、先ほどのtargetの中身を見比べてみてください。"BUTTON"イベントオブジェクトのtarget。その中に入っているキー[0]でDOM要素を取得し、さらにその中からnodeNameプロパティで対象となった要素名を取得します。要素名が"BUTTON"だったら何もせずreturnというわけです。今回のような単純なコードでしたら入れる必要もないと思います。"BUTTON"でいけます。一度じっくり眺めてみるとなんとなく解ってきました。見よくわからない!と思っても、テンパることなく冷静に眺めていることって必要ですね。余談ですが、今回のことでなぜ$()を使ってjQueryオブジェクトにするのか?ということが今更ながら理解できました。根本が解っていないと理解が遅くなる一方ですね。奥が深いと思うので、これを機にちゃんと勉強してみます。~イベントによって表示・非表示を切り替える~こんにちは、マリンです。〜式展開の色々〜こんにちは、マリンです。今回はjQueryでの式展開についてです...2018-01-17【jQuery】要素をコピーするこんにちは、マリンです。今回は要素をコピーする方法をご紹介...2018-01-14【jQuery】クリックでテーブルの行をハイライトさせる。皆さん明けまして(だいぶ経ちますが)おめでとうございます。...2017-06-03【Bootstrap4】navbarを2段にしてみた。こんにちは、マリンです。»プロフィールid:song-of-life1352607アラサーで思い立ってプログラミングを始めた主婦が、自宅でお小遣い稼ぎをしたいがために自作アプリのリリースを目指すブログです。【Git】ブランチ間違えてコミットしてた!?月別アーカイブ参加グループプログラミングはてなブログをはじめよう!song-of-life1352607さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。