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

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

附加说明：

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

Answer 2

你可以试试这个： -

 <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();

 }

Answer 3

您需要图像上的事件处理程序（或图像包装器，具体取决于您要查找的确切效果），以便在没有传播到叠加层时单击图像。

或者，检查事件对象的target属性和return是否是您不想处理该事件的内容。

Answer 4

您可以在preventDefault()

上img

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

});

FIDDLE

Answer 5

只需确保点击来自叠加层而不是其他内容：

function something(e) {
  e = e || window.event;
  evar target = e.target || e.srcElement;
  if (target.id === 'overlay') {
    console.log('Overlay has been clicked');
  } else {
    console.log('Something else has been clicked');
  }
}

Answer 6

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



getElementById('overlay').onclick = function(e) {
    console.log('did something');
    callToSomehtingElse();
}

getElementById('image-wrapper').onclick = function(e){
    console.log('but here i prevented it'); 
    e.preventDefault();
    e.stopPropagation();
}

感谢所有人......

在Javascript中停止传播

6 个答案: