如果单击了 div 单击事件中的链接，则不要触发该事件

Question

我有一个div，点击时会展开。我在这个div中也有一个链接。预期行为是在单击链接时忽略单击事件，但显然单击div 中的任意位置将触发该事件。我试过 stopPropagation((，但它似乎不起作用。

$('#infobox').on('click', expandFunction);
$('#infobox a').on('click', function(event) {
event.stopImmediatePropagation();
});
<div class="infobox">
<a href="#">Link</a>
</div>

Answer 1

function expandFunction() {
alert("expanded")
}
document.getElementById("infobox").addEventListener('click', function (event) {
if (event.target.tagName != event.currentTarget.tagName) return;
expandFunction();
});
document.querySelector("#infobox a").addEventListener('click', function (event) {

alert("linkclicked")
})

div{
padding:15px;
background-color:gray;
}
a{
padding:15px;
background-color:silver;
color:white;
margin:5px;
display:inline-block
}

<div id="infobox" class="infobox">
<a href="#">Link</a>
</div>

首先，您必须为信息框设置 ID

<div id="infobox" class="infobox">

您可以使用此代码来防止来自其他元素的点击

$('#infobox').on('click', function(event){ 
if(event.target.id!= event.currentTarget.id) return;
expandFunction();
});