Javascript中的stopPropagation

Question

我想要一个覆盖来触发click事件。但是，click对每个子节点都有影响。

​

function something(e) {
  e.stopPropagation();
  console.log('its fired');
}

#overlay {
  width: 100%;
}
#image-wrapper {
  width: 50%;
}

<div id="overlay" onclick="something">
  <div id="image-wrapper">
    <img src="image.jpg" id="popupImage" alt="[image]">
  </div>
</div>

​

我不希望它在图像上触发click。只在覆盖层里。

Answer 1

您可以在preventDefault()上使用img

$("img").click(function(e){
 e.preventDefault();
 e.stopPropagation();
 console.log("stop click");    

});

小提琴

Answer 2

event.target是触发事件的元素。

event.currentTarget是当前正在处理EventListeners的EventTarget。

因此，比较那些可以过滤在元素本身中触发的事件，而不是在其后代中触发的事件。

​

document.getElementById('overlay').addEventListener('click', function(e) {
  if(e.target != e.currentTarget) return;
  console.log('its fired');
});

#overlay {
  width: 100%;
  background: #aaf;
}
#image-wrapper {
  width: 50%;
  background: #afa;
}

<div id="overlay">
  <div id="image-wrapper">
    <img src="image.jpg" id="popupImage" alt="[image]">
  </div>
</div>

​

补充说明：

• 避免html中的内联事件侦听器。最好使用JS添加它们，例如使用addEventListener。
• 通常，您可以使用this而不是e.currentTarget。

Answer 3

你可以试试这个：-

 <div id="overlay" style="width: 100%;" onclick="something">
   <div id="image-wrapper" style="width: 50%;">
    <img src="image.jpg" id="popupImage" onclick="nothing">
  </div>
 </div>

function something (e) {


  console.log('its fired');
 }

function nothing (e) {
  e.stopPropagation();

 }