禁用div上的鼠标事件

Question

我遇到了一个有趣的问题，涉及使用“pointer-events” CSS样式来禁用鼠标事件。

请参考示例。它有一个父div和两个子div，我将其中一个子div的“pointer-events”设置为“none”。如果我单击该div，它的鼠标监听器不会触发（这是预期的），但其父div的鼠标事件会被触发。

$('#parent').click(function(){
   console.log("Parent clicked"); 
});

如果我点击了被禁用鼠标事件的子元素，如何在父元素上禁用鼠标事件呢？

一个选项是在父级点击时使用“if”条件进行过滤。但我不需要它，因为我想监听在父元素后面的“divs”的鼠标事件。

请提供一些帮助 :)

谢谢， Rethna

- Rethna

---

你想监听父级 div 中仅一个子元素的鼠标事件吗？ - Dhanu Gurung

将 pointer-events 设置为 none 并不意味着元素永远不会接收鼠标事件。如果子元素允许捕获，那么它将在冒泡到父级链时接收这些事件。 - Fizor

理想情况下，如果我将“pointer-events”设置为“none”，那么它对鼠标事件应该是不可见的。如果我点击它，它也不应该触发其父元素上的事件。 - Rethna

你无法使用CSS指针事件来实现这个。因为#child2的指针事件被禁用了，浏览器会触发#child2元素的父级元素的点击事件。 - goerwin

@Rethna 如果你保留那个逻辑，那么从 child2 的父级一直到 body 的所有父级都不应该触发点击事件。 - goerwin

Answer 1

我无法使指针事件按照我的意图工作，因此我更改了JavaScript代码以实现您想要的效果。我在child2上使用了event.stopPropagation，这样您就可以单击它并仅触发其单击事件，而不是其父元素的单击事件。顺便说一下，我对jQuery知之甚少，所以我写了一些纯JavaScript和jQuery混合的代码，希望有人能帮我翻译一下。

这里是fiddle。

CSS：

#child1{
    background-color:#ff0000;
    width:100px;
    height:100px;
    pointer-events: all;
}

#child2{
    background-color:#00ff00;
    width:100px;
    height:100px;
    pointer-events: all;
}

#parent{
     pointer-events: none;
}

JavaScript：

$(document).ready(function(){
    document.getElementById('child1').addEventListener('click', function(){
        console.log("child1 clicked");
    }, false);
    
    document.getElementById('child2').addEventListener('click', function(e){
        e.stopImmediatePropagation();
        console.log("child2 clicked");
    }, false);
    
    document.getElementById('parent').addEventListener('click', function(){
        console.log("Parent clicked");
    }, false);
});

- Matheus

Answer 2

对于偶然发现这篇文章的任何人，这里有一些非常有用的内容。

el.setPointerCapture()将聚焦于给定元素上的所有指针事件。

不仅可以隔离节点，还可以获得更好的性能，因为浏览器停止在其他任何地方执行命中测试。

- zergski