現在、jQuery を使用して div をクリック可能にしていますが、この div にはアンカーもあります。発生している問題は、アンカーをクリックすると、div とアンカーの両方のクリック イベントが発生することです。アンカーがクリックされたときに div の onclick イベントが発生しないようにするにはどうすればよいですか?
壊れたコードは次のとおりです:
JavaScript
var url = $("#clickable a").attr("href");
$("#clickable").click(function() {
window.location = url;
return true;
})
html
<div id="clickable">
<!-- Other content. -->
<a href="http://foo.example">I don't want #clickable to handle this click event.</a>
</div>
ベストアンサー1
イベントは、クリック イベントが添付されている DOM の最高点にバブルします。したがって、この例では、div 内に明示的にクリック可能な他の要素がない場合でも、div のすべての子要素は、DIV のクリック イベント ハンドラーがそれをキャッチするまで、DOM 上でクリック イベントをバブルします。
この問題の解決方法は 2 つあり、イベントを実際に誰が開始したかを確認することです。jQuery は、イベントとともに eventargs オブジェクトを渡します。
$("#clickable").click(function(e) {
var senderElement = e.target;
// Check if sender is the <div> element e.g.
// if($(e.target).is("div")) {
window.location = url;
return true;
});
リンクにクリックイベントハンドラを添付して、イベントのバブルを停止する独自のハンドラが実行された後:
$("#clickable a").click(function(e) {
// Do something
e.stopPropagation();
});