能否通过CSS阻止事件传播？JavaScript实现示例解析

JavaScript：完全可以实现事件传播阻止 #

当然能用JavaScript来阻止事件传播，你给出的示例代码其实已经用到了正确的核心方法——event.stopPropagation()。这个方法的作用是中断事件在DOM树中的传递过程（不管是冒泡阶段向上传递，还是捕获阶段向下传递）。

就像你写的这段代码：

function func1(event) {
  alert("DIV 1");
  if (document.getElementById("check").checked) {
    event.stopPropagation();
  }
}

当复选框被勾选时，调用event.stopPropagation()后，当前触发的事件就不会再传递到父元素的事件处理函数中了。另外要注意区分event.preventDefault()，它是用来阻止浏览器的默认行为（比如点击链接跳转），和事件传播没有关系。如果想要更彻底地阻断事件——既阻止传播，又阻止当前元素后续绑定的同类型事件处理函数执行——可以用event.stopImmediatePropagation()。

CSS：无法直接实现事件传播阻止 #

很遗憾，CSS没有直接阻止事件传播的属性或方案。不少人会想到pointer-events: none，但这个属性的作用是让元素完全不接收任何鼠标、触摸类事件——也就是说，事件根本不会触发这个元素的事件处理函数，自然也就不存在“传播”的前提了。这和JavaScript的阻止传播是完全不同的概念：

• event.stopPropagation()是事件已经触发了当前元素的处理函数，只是不让它继续传递给父元素；
• pointer-events: none是事件直接跳过当前元素，相当于这个元素在事件流里“隐身”，事件会直接作用于它下方的元素。

举个例子：如果给一个div设置pointer-events: none，点击这个div时，事件会直接触发它父元素的点击事件（如果父元素绑定了的话），而不是先触发div的事件再阻止传播。

总结 #

• JavaScript可以通过event.stopPropagation()（或event.stopImmediatePropagation()）直接阻止事件传播；
• CSS无法实现和JavaScript一致的“阻止事件传播”效果，pointer-events只是让元素不接收事件，并非阻止传播。

内容的提问来源于stack exchange，提问作者Max Lindner