参见英文答案 >
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");
}
});
