使用Javascript停止传播

问题描述：

我想要一个覆盖图来触发click事件。但click在每个孩子节点上都有。使用Javascript停止传播

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在图像上。只在叠加。

在黑暗中拍摄：你试过即PreventDefault（） – Zaphod 2014-10-27 15:07:49

@Zaphod我想你的意思是'e.preventDefault（）'。但是在这里没有可以防止的默认动作，并且'preventDefault'不会停止传播。 – Oriol 2014-10-27 15:20:47

其实我做过，玩过类似preventDefault和cancelBubling的东西 – 2014-10-27 15:28:06

答

可以preventDefault()在img

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

});

FIDDLE

'preventDefault'在这种情况下不会执行任何操作，因为没有可以阻止的默认操作。它是'stopPropagation'阻止图像中触发事件的传播。 – Oriol 2014-10-27 15:22:47

答

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

或者，检查事件对象的target属性和return如果不想处理该事件。

答

你可以试试这个： -

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

}

内联事件侦听器不能像这样工作。 – Oriol 2014-10-27 15:21:10

答

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

event.currentTarget是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。

答

只需确保点击来自叠加，没有别的：

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'); 
    } 
}

答

<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停止传播

相关推荐