Question

我有一个ul元素，其中有三个li子元素，而ul ele具有一个useCapture事件处理程序以供单击。在click事件处理程序中，我通过以下方式停止了事件：event.stopPropagation（），只要一切都能按预期完成，就可以了：单击ul / li时，事件将停止。

但是，当我通过css :: after为ul添加一个伪元素时，此子伪元素的运行情况并不理想，当我单击该伪元素时，click事件并未停止，并且在Chrome的调试器面板中，我检查了事件监听器中的伪元素是否与li元素完全相同。

这是我的主要代码：

document.querySelector('#ul').addEventListener(
  'click',
  e => {
    console.log('clicked')
  },
  false
)
document.querySelector('#ul').addEventListener(
  'click',
  e => {
    e.stopPropagation()
  },
  true
)

#ul::after {
  content: 'child';
  width: 100%;
  height: 20px;
  border: 1px solid red;
}

<ul class="list" id="ul">
  <li class="item">foo</li>
  <li class="item">bar</li>
  <li class="item">baz</li>
</ul>

Answer 1

由于伪元素不是真正的DOM，因此事件会注册到真正的DOM，这就是它不起作用的原因。

event.stopPropagation不适用于伪元素吗？

1 个答案: