我有一个'层'，我想给予一个onclick。诀窍是，我希望上面层的元素在单击时不执行该操作。我怎样才能让这一切发生？
gywdnpxw1#
您遇到的问题是由事件通过DOM树向上传播的方式引起的。当您单击页面上的某个元素时，该元素的单击处理程序将有机会响应单击。除非处理程序停止事件传播，否则父元素将有机会处理事件，依此类推，直到到达根元素。这种行为通常感觉很自然，被单击元素“后面”的每个元素都将有机会响应事件。但是，当你使用绝对定位时，你可以将一个元素放在另一个元素的前面，而这个元素在dom树中不是它的祖先。此时，事件传播可能会令人困惑。只有被单击的元素祖先接收click事件，这意味着它后面的元素可能不会接收。我创建了一个jsfiddle -http://jsfiddle.net/HUGNd/-来说明这种情况。一种快速解决方法是确保要响应click事件的元素是被单击元素的祖先。否则，无论调用哪个元素的事件处理程序，您都可能在JavaScript中获得所需的结果。
taor4pac2#
调用event.stopPropagation（）来防止“冒泡”。或者，如上所述，更改绝对定位元素的父元素关系。
zi8p0yeb3#
我有点困惑，我认为这会通过浏览器自然发生。据我所知，你正试图做这样的事情：
<html> <body> <div id="block" style="position:absolute; top:0; left:0; width:200px; height:200px; background-color:red;" onclick="alert('clicked');"></div> <div id="block" style="position:absolute; top:0; left:0; width:100px; height:100px; background-color:blue;"></div> </body> </html>
[Not真的是一个答案，但考虑到我想发布代码，我觉得评论是不合适的]
bq8i3lrv4#
您可以将事件触发器减少到所需的目标。
targetDiv.onclick = (e) => { if ((e.target) == targetDiv) { alert('correct target'); } }
kqqjbcuj5#
您可以使用以下CSS属性来取消该元素上的所有指针事件：
.element { pointer-events: none; }
该属性将禁用该元素上的所有事件，如悬停、单击、聚焦等
5条答案
按热度按时间gywdnpxw1#
您遇到的问题是由事件通过DOM树向上传播的方式引起的。当您单击页面上的某个元素时，该元素的单击处理程序将有机会响应单击。除非处理程序停止事件传播，否则父元素将有机会处理事件，依此类推，直到到达根元素。
这种行为通常感觉很自然，被单击元素“后面”的每个元素都将有机会响应事件。但是，当你使用绝对定位时，你可以将一个元素放在另一个元素的前面，而这个元素在dom树中不是它的祖先。此时，事件传播可能会令人困惑。只有被单击的元素祖先接收click事件，这意味着它后面的元素可能不会接收。
我创建了一个jsfiddle -http://jsfiddle.net/HUGNd/-来说明这种情况。
一种快速解决方法是确保要响应click事件的元素是被单击元素的祖先。否则，无论调用哪个元素的事件处理程序，您都可能在JavaScript中获得所需的结果。
taor4pac2#
调用event.stopPropagation（）来防止“冒泡”。或者，如上所述，更改绝对定位元素的父元素关系。
zi8p0yeb3#
我有点困惑，我认为这会通过浏览器自然发生。据我所知，你正试图做这样的事情：
[Not真的是一个答案，但考虑到我想发布代码，我觉得评论是不合适的]
bq8i3lrv4#
您可以将事件触发器减少到所需的目标。
kqqjbcuj5#
您可以使用以下CSS属性来取消该元素上的所有指针事件：
该属性将禁用该元素上的所有事件，如悬停、单击、聚焦等