javascript - 使用 JQuery，如何停止传播 DOM 的点击事件？

Question

给定以下 HTML 片段：

<li class="list">
  <img src="/assets/img/site/arrow_black.png"/>My List Element<span class="star"></span>
</li>

当我将单击事件绑定到li元素并将单击事件绑定到.star类时，我的问题如下：

li当我点击星星时，如何在触发时停止点击事件？

我的 JQuery 代码看起来类似于：

$(".list").click(function() {
//do something
}

$(".star").click(function() {
//do something
}

Answer 1

见jQuery.stopPropagation()

$(".star").click(function(e) {
    e.stopPropagation();
    // do work
}

Answer 2

尝试event.stopPropagation();

$(".star").click(function(event) {
  event.stopPropagation();
  // Do something
}

Answer 3

您需要停止 .star 的平均传播。

http://api.jquery.com/event.stopPropagation/

$(".star").click(function(ev) {
    ev.stopPropagation();
});

Answer 4

您可以使用事件委托..

将事件监听器应用到 ul

document.getElementById("parent-list").addEventListener("click",function(e) {

if(e.target && e.target.nodeName == "LI") {
    var classes = e.target.className.split(" ");

    if(classes) {

      for(var x = 0; x < classes.length; x++) {

        if(classes[x] == "star") { // do your thing
                                  }
                    }
          }
  }
});

});

或者只是使用 preventDefault 来星级