javascript - 使用嵌套元素处理触摸事件？

Question

我对 jquery 和我的 html 的布局有这个问题。

例如，假设您有一个 id 为“#test”的 div 元素和一个类为“nested”的子元素 img

<div id="test">
  <img class="nested" src="example.jpg">
</div>

使用Jquery我有两个触摸事件，

$(document).on("click", "#test", function(){
    console.log("clicked on test id");
});

$(document).on("click", ".nested", function(){
    console.log("clicked on nested element");
});

我的问题是在第二个触摸事件上，当用户单击嵌套项目时，这也会触发第一个元素，因为显然它是嵌套的，我不希望这种情况发生。

我很确定这是一个简单的问题，但我似乎不明白。

Answer 1

Answer 2

您需要使用 event.stopPropagation() 停止传播

$(document).on("click", ".nested", function(e){
    e.stopPropagation();
    console.log("clicked on nested element");
});

Answer 3

event.stopPropagation()在子元素click事件中使用：

event.stopPropagation():

停止将事件冒泡到父元素，防止任何父处理程序收到事件通知。添加

$(document).on("click", ".nested", function(){
     event.stopPropagation()// prevents the action without notifying the parent
    console.log("clicked on nested element");
});