CSS能否停止事件传播？

Question

使用Javascript可以通过代码停止事件传播吗？例如：

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

CSS也能阻止事件传播吗？

- Max Lindner

---

请注意，您在代码和标签中正确拼写了propagation，并且可能在标题中也正确拼写了；请在将来更加小心。 - jonrsharpe

不，这是不可能的。 - GolezTrol

CSS 可以做一些事情来防止某些事件在第一时间发生（例如 pointer-events: none），但它实际上无法真正停止事件传播，这甚至不是它的工作范畴。 - 04FS

我也曾经想过同样的问题，并尝试过相同的方法，但实话实说，CSS和JS在不同的线程上运行。虽然你可以以有限的格式触发事件，例如a[target=_blank] { background-color: yellow; }。 - Syed

我很喜欢它，可以根据创意风险的大小制作一些令人惊叹的UI效果，例如a[target=_blank]:hover:after { background-color: yellow; content: attr(message); }。 - Syed

然而，当这种情况发生时，它不能停止传播，老实说，它并没有真正的传播，更多的是反映状态，即悬停与不悬停。而JS事件更多是在悬停和非悬停时触发。如果您的意图是停止事件传播，则@04FS的语句是正确的 - 这根本不是CSS所能做到的。它更适合于以各种状态绘制DOM，其他所有事情都不是它的问题。因此，不行。 - Syed

Answer 1

您可以使用这段简单的CSS代码：

.disabled-button{
    pointer-events: none;
}

- Saeed sdns

---

这个并不完全按预期工作。例如： 如果你在父元素上设置 pointer-events: none，然后在它的子元素上设置 pointer-events: auto，那么在子元素上触发的事件将会传播到父元素甚至更深层次的元素。 - tikej

Answer 2

在某些浏览器中，有点像。您可以使用“all”属性将元素重置为初始值。这应该意味着初始值会从那里继承下来。

不幸的是，IE和Edge不支持。 https://www.caniuse.com/#search=all

- Brett

---

这与事件传播有什么关系呢？ - 04FS

99%的传播涉及冒泡（即向上）加上继承，这与事件完全不同。 - zer00ne

看起来我误解了问题。我理解为传播的通用定义，而不是特定的事件传播。 - Brett