- ベストアンサー
JQueryでクリック時のタグの親子の関係について
- JQueryを使用して、spanをクリックするとspanとdivをクリックしたことになってしまう問題が発生しています。この問題を解決するための方法について教えてください。
- divタグとspanタグのクリックイベントが紐づけられているため、spanをクリックした場合でもdivをクリックしたことになります。どのようにしてspanをクリックしたことにすることができるのでしょうか？
- JQueryのclick関数を使用してdivタグとspanタグにクリックイベントを設定していますが、spanをクリックしてもdivをクリックしたことになってしまいます。この問題を解決するための方法を教えてください。
- nana_watuki
- お礼率61% (142/232)
- JavaScript
- 回答数6
- ありがとう数1
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ライブラリを使用しない場合は、 divとspanの両方にイベントハンドラを登録した場合、"click span"のあとに"click div"の２つのアラートが順番に出るはずです。 jQueryを使用した場合に"click div"しか出ないのであれば、 jQueryの内部処理にて、click spanが抑制されていると思います。 すみませんがjQueryについてはわかりかねますので、内部処理の抑制を解く方法を知らないのですが、 .click()を呼び出す（イベントハンドラを登録する）順番を逆にするとどうでしょうか。 $(function(){ $("span").click(function(e){ e.stopPropagation(); console.log("click span"); }); $("div").click(function(e){ e.stopPropagation(); console.log("click div"); }); }); その上で、No.2に書かれているような処理の伝播を止める方法を使えばいいと思います。 -------- 別の方法として。 <div>にだけイベントハンドラを登録して、その内部でどの要素がクリックされたかを判断してみてはどうでしょうか。 $(function(){ $("div").click(function(){ if( $(this).get(0).nodeName==='SPAN' ){ console.log("click span"); }else{ console.log("click div"); } }); });
その他の回答 (5)
- Chaire
- ベストアンサー率60% (79/130)
jQuery 1.7 をお使いなのですから、今後は on() を使うようにして下さい。 jQuery(document).on('click', 'div span', function (e) { e.target; // span e.currentTarget; // span }); on() と off() によって、jQuery でも多少はバブリングを自然に扱えるようになりました（まだ足りないとは思いますが）。今後は click() や keydown() のようなものでなく、on() で統一して下さい。jQuery の内部コードでは、すでに click() などは on() のショートカットになっています。 最近 W3C から HTML のテンプレート処理の草案も出ましたので、バブリングによる遠隔監視は重要です。特別な理由がない限り、イベントフローを勝手に止めないようご注意下さい。
- fujillin
- ベストアンサー率61% (1594/2576)
＞spanをクリックしてもdivをクリックしたことにしないようにするには div内にあるspanをクリックすれば、divをクリックしたことになるのが当然なので、構造的に無理をしているように思えます。 バブリングを止めてしまえば、ご質問のことは一応可能ではありますが… 構造的にspan要素をdivの子ではなくして、表示で重ねて表示するようにすれば、ご提示のコードのままで動作するはずです。 あるいは、構造的にはそのままが正しくて、divをクリックした時にsapn要素とそれ以外の時とで処理を分けたいのであれば、ANo3様の（後半の）ような考え方の方が素直ではないでしょうか。 ただし、そのままだとちょっと違うようなので（this値にはdiv要素が入ってくる）、 $("div").click(function(e){ if( e.target.nodeName==='SPAN' ){ ～～～ のようにすれば、予定の動作になるかと思います。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
No.3です。 すみません、質問文読み間違えました。 No.3の前半は無視してください。
- LOHA
- ベストアンサー率52% (203/388)
いわゆるバブリングと呼ばれるものです。 イベント発生時にe.stopPropagationで止めることが可能です。 http://jsajax.com/Articles/event5/305 http://semooh.jp/jquery/cont/doc/event/#event.stopPropagation 頻繁に使用する事も無いですが、別に有り得ないシチュエーションだとは思いません。
- flyingbee
- ベストアンサー率26% (49/182)
divはブロック要素、spanはインライン要素でDIVに含まれます。 spanをクリックすればdivも反応するのはDOM構造上当然の配置です。 つまり、片方しかアクションをおこしたくないのであればデータ構造に誤りがあると思われます。 回避方法はメンバ変数を利用するなどがイベントをまたぐ時の常識ですが、 この場合は適当とは思えません。
お礼
こちらのやり方で問題を解決できました。 ケースによっては<div>にだけイベントハンドラを 登録する方法を使用したいと思います。