参见英文答案 >
How do I prevent a parent’s onclick event from firing when a child anchor is clicked?13
在这个例子中,我希望当黑色外部div被点击时触发警报,但是当内部div中的任何内容被点击时才会被触发.
在这个例子中,我希望当黑色外部div被点击时触发警报,但是当内部div中的任何内容被点击时才会被触发.
目前,当我点击内部的按钮它触发警报.
$("#outer").click(function() { alert("triggered"); });
#outer{ position: absolute; width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; } #inner{ background-color: #fff; width: 300px; height: 300px; text-align: center; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outer"> <div id="inner"> <button>inner button</button> </div> </div>
我想在内部的div内没有触发警报.我该怎么做?
(由于某些原因内部按钮没有显示在代码段中,这里是codepen链接:https://codepen.io/GuerrillaCoder/pen/Pmvmqx)
解决方法
您只需要检查元素的id,因为inner是子元素,它将始终将事件传播到父元素(外部).
$("#outer").click(function(event) { if(event.target.id=="outer"){ alert("triggered"); } });