0

フィドル

もちろん、.innerレイヤーをレイヤーから取り出して、.main別のラッパー、つまりレイヤーに対して絶対位置を使用して同じ位置に配置することもできます。これにより、クリックイベント.outerがトリガーされなくなります。.mainしかし、子要素と親の両方がクリックイベントをトリガーした場合に、両方のクリックイベントが発生しないようにする簡単な方法があるかどうか疑問に思いました。

4

2 に答える 2

1

あなたが使用することができますstopPropagation()

$(document).ready(function() {
    $('.outer').on("click",".main",function() { alert('main clicked'); })
    $('.outer').on("click",".inner",function(e) {e.stopPropagation(); alert('inner clicked'); })
});

http://jsfiddle.net/5xvkM/6/

于 2012-06-02T01:04:15.957 に答える
1

を使用しstopPropagation()ます。両方が委任されたイベントであっても、jQueryはそれらを最初に最も深く評価します。最も内側にあるので、stopPropagation()上位のイベントは実行されません。

$('.outer').on("click", ".inner", function(event) {
    event.stopPropagation();
    alert('inner clicked');
});

But you'll have to note the order of execution between direct handlers and delegated handlers. Since events need to bubble to reach the delegated handlers, direct handlers are fired first. Stopping propagation using delegated handlers would be useless when direct handlers are in the mix.

于 2012-06-02T01:04:22.413 に答える