你能检测 CSS 伪元素上的点击事件吗？

伪元素上的点击事件检测

问题：

在提供的代码中，伪元素（红色位）和主元素（蓝色位）都会触发单击事件。但是，目标是仅检测伪元素上的点击。这可能吗？

答案：

不，不可能直接检测伪元素上的单击事件，因为它们不作为文档对象的一部分存在模型（DOM）。伪元素是浏览器生成的虚拟元素，不属于实际 HTML 结构的一部分。

替代方法：

如果需要实现点击专门针对红色区域的处理程序，您可以创建一个子元素，例如span：

<p>
  <span class="red-bit"></span>
  Lorem ipsum dolor sit amet, ...
</p>

然后，将样式应用于span 元素：

.red-bit {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

最后，将点击处理程序绑定到 span 元素：

document.querySelector(".red-bit").addEventListener("click", function() {
  // Click handler code
});

这种方法允许您捕获红色区域上的点击，同时防止触发点击在主要元素上。

以上是你能检测 CSS 伪元素上的点击事件吗？的详细内容。更多信息请关注PHP中文网其他相关文章！