Question

我的div在单击时会扩展。我在这个div内也有一个链接。预期的行为是单击链接时会忽略click事件，但是显然单击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();
});

如果单击其中的链接，请勿触发div click事件

1 个答案: