Question

我跟这个很相似：

<ul>
<li class="parent">
<div class="child"></div>
</li>
</ul>

我有两个点击触发器。

$(document).on("click", ".parent", function(){
console.dir("parent clicked");
});

$(document).on("click", ".child", function(){
console.dir("child clicked");
});

如果我点击孩子，也会点击父母！我该如何避免这种情况？

http://jsfiddle.net/Vd2GA/

Answer 1

在子点击事件处理程序中使用return false或e.stopPropagation()：

$(document).on("click", ".child", function(e) {
    console.dir("child clicked");
    return false;  // e.stopPropagation();
});

DEMO： http://jsfiddle.net/Vd2GA/1/

Answer 2

 $(document).on("click", ".parent", function(e){
     e.stopPropagation();
    console.dir("parent clicked");
    });

    $(document).on("click", ".child", function(e){
        e.stopPropagation();
    console.dir("child clicked");
    });

应该

Answer 3

防止儿童传播事件。

 $(document).on("click", ".parent", function () {
     console.dir("parent clicked");
 });

 $(document).on("click", ".child", function (e) {
     console.dir("child clicked");
     e.stopPropagation();
 });

演示：Fiddle

注意：这种技术在这里是可行的，因为当使用事件委托时，jQuery会在场景魔术背后做一些其他操作，因为两个处理程序都注册到文档对象，这是无法完成的。

Answer 4

使用event.stopPropagation

fiddle Demo

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

 $(document).on("click", ".child", function (e) {
     e.stopPropagation();
     console.dir("child clicked");
 });

阅读What is event bubbling and capturing?

Answer 5

在此更新了小提琴：http://jsfiddle.net/Vd2GA/2/。

$(document).on("click", ".parent", function(){
    console.dir("parent clicked");
});

$(document).on("click", ".child", function(e){
    e.stopPropagation();
    console.dir("child clicked");
});

Answer 6

或者如果您需要具体，可以使用此条件

 $(document).on("click", ".parent", function(e){
   if (e.target==this)
    console.dir("parent clicked");
 });

http://jsfiddle.net/Vd2GA/4/

单击子元素上的单击子元素触发器上的Jquery

6 个答案: