javascript - event.stopPropagation对伪元素不起作用吗？

我有一个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>

最佳答案

因为伪元素不是真实的DOM，所以事件会注册到真实的DOM，这就是它不起作用的原因。

关于javascript - event.stopPropagation对伪元素不起作用吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55206185/