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

Question

I have a div that expands when clicked. I also have a link inside this div. Expected behavior is for the click event to be ignored when the link is clicked, but obviously clicking anywhere in the div will trigger the event. I've tried stopPropagation(), but it doesn't seem to work.

$('#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> 

first you must set Id for infobox

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

you can use this code to prevent click from other elements

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