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

Don't trigger the parent event when clicking on the child element

本文关键字：事件 元素 单击      更新时间：2023-09-26

请参阅我的片段，当我单击父元素时，会显示子元素，但是当我单击子元素时，父元素事件似乎也与子元素事件一起触发，任何想法在单击时仅触发父元素事件，在单击时仅触发子元素事件（不得冒泡父元素事件）？ 任何想法， 请帮助，线索，建议，建议？

$(document).ready(function(){
  $("#child").hide();
  $("#parent").click(function(){
    alert("parent event is triggered");
    $("#child").show();
  });
  $("#child").click(function(){
    alert("child event is triggered");
  });
});
#parent{
 padding: 15px;
 border: 3px dotted #cccccc;
}
#child{
 padding: 4px;
 border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  This is parent element, click to show the child element
  <div id="child">Child</div>
</div>

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

您是否尝试过添加 stopPropogation

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

参考

相关文章：