Question

我遇到了jquery和我的html布局的问题。

例如，假设您有一个id “#test”的div元素和一个类“嵌套”的子元素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

使用event.stopPropagation（）;

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

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

参考event.stopPropagation()

Answer 2

您需要使用event.stopPropagation（）

停止传播

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

Answer 3

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

event.stopPropagation（）：

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

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

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

3 个答案: