点击子元素触发点击父元素的Jquery事件

Question

我看过类似这样的内容：

我类似于这样：

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

我有两个onclick触发器。

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

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

如果我点击子元素，父元素也会被点击！如何避免这种情况？ http://jsfiddle.net/Vd2GA/

- user796443

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/

- VisioN

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");
    });

应该做

- gogic1

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会在幕后进行一些魔法，否则由于两个处理程序都注册到文档对象，无法实现这个功能。

- Arun P Johny

Answer 4

使用event.stopPropagation函数

fiddle演示

防止事件冒泡到DOM树上，从而阻止任何父级处理程序收到事件通知。

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

阅读什么是事件冒泡和捕获？

- Tushar Gupta - curioustushar

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");
});

- eg_dac

Answer 6

如果您需要更具体的条件，也可以使用此条件

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

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

- Michael Aguilar