Question

看到我的代码片段，当我单击父元素时，会显示子元素但是当我单击子元素时，父元素事件似乎也会随着子元素事件一起触发，任何想法只触发父元素事件时单击时，单击时只显示子元素事件（不得冒泡父元素事件）？请问任何想法，帮助，线索，建议和建议？

＆＃13;

<input type="text" name="name[]" placeholder="Name" />
...

＆＃13;

$(document).ready(function(){
  $("#child").hide();
  $("#parent").click(function(){
    alert("parent event is triggered");
    $("#child").show();
  });
  $("#child").click(function(){
    alert("child event is triggered");
  });
});

＆＃13;

#parent{
 padding: 15px;
 border: 3px dotted #cccccc;
}
#child{
 padding: 4px;
 border: 1px solid blue;
}

＆＃13;

Answer 1

$("#child").click(function(){
    alert("child event is triggered");
    event.stopPropagation();
  });

Answer 2

您是否尝试过添加stopPropogation

$("#child").click(function(event){
    alert("child event is triggered");
    event.stopPropagation();
});

Reference

单击子元素时不要触发父事件

2 个答案: