javascript - 在 'div' 上禁用鼠标事件

Question

我在使用“指针事件”CSS 样式禁用鼠标事件时遇到了一个有趣的问题。

请引用fiddle .它有一个父级和两个子级 div，我将其中一个子级的“指针事件”设置为“无”。如果我点击那个 div，它的鼠标监听器不会被触发(这是预期的)但它的父 div 的鼠标事件会被触发。

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

如何在父 div 上禁用鼠标事件，如果我点击了其禁用鼠标事件的子项？

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

请提供一些帮助:)

谢谢，雷思那

Answer 1

我无法使指针事件按预期工作，因此我更改了 javascript 以实现您想要的。我所做的是对 child2 的 event.stopPropagation，因此您可以单击他并仅触发他的点击事件，而不是他 parent 的点击事件。顺便说一句，我对jquery知之甚少，所以我写了一个纯javascript和jquery的混合，希望有人能帮我翻译一下。

来了 fiddle

CSS:

child 1{

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

child 2{

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