Javascript 单击子元素时的Jquery在单击父元素时触发

我有过类似的经历：

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

如果我单击“子对象”，也会单击“父对象”！ 我如何避免这种情况

---

在子单击事件处理程序中使用

返回false

或

e.stopPropagation（）

：

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

---

演示：

防止子事件的传播

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

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

演示：

注意：这项技术在这里是可能的，因为jQuery在使用事件委派时做了一些幕后魔术，因为这两个处理程序都注册到文档对象，所以无法使用

防止事件在DOM树中冒泡，防止任何 父处理程序不会收到事件通知

阅读

应该做的事

在这里更新了小提琴：

---

如果需要具体说明，也可以使用此条件

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

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

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

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

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

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

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