如何检测CSS伪元素上的点击事件？

伪元素点击事件检测

伪元素，如:before和:after，通过以下方式增强HTML元素的样式能力：插入虚拟内容。然而，这些虚拟元素不是 DOM 的一部分，缺乏直接的事件处理能力。

在给定的示例中，仅检测红色伪元素（使用 p:before 创建）上的单击事件是有问题的。由于伪元素不在 DOM 中表示，因此您无法将点击事件直接绑定到它们。

解决方案：

要实现所需的行为，请考虑使用子元素元素而不是伪元素。创建一个元素并将其放置在紧接着开头

之后标签。将当前应用于 p:before 的样式应用到此 中。

<p>
  <span></span>Lorem ipsum dolor sit amet...
</p>

p span {
  content: '';
  position: absolute;
  left:100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

现在您可以将点击事件绑定到 上。

注意：

并非所有浏览器都一致支持将事件绑定到伪元素内的子元素。为了获得最佳的跨浏览器兼容性，请考虑使用上述方法，而不是依赖伪元素进行事件处理。

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