如何检测HTML中伪元素的点击事件？-js教程-PHP中文网

如何检测HTML中伪元素的点击事件？

Patricia Arquette

发布： 2024-11-17 20:20:02

原创

343 人浏览过

How Can I Detect Click Events on Pseudo-Elements in HTML?

检测伪元素上的点击事件

在 HTML 中，伪元素扩展了元素的样式和视觉功能，但实际上并不存在于元素中DOM 树。当尝试专门检测伪元素上的点击事件时，这提出了挑战。

考虑以下 HTML 和 CSS：

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

登录后复制

p {
    position: relative;
    background-color: blue;
}

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

登录后复制

在此示例中，

元素有一个超出其右边缘的红色伪元素。目标是仅在红色区域而不是蓝色矩形上触发点击事件。

解决方案

不幸的是，无法将事件直接绑定到伪-elements，因为它们不是 DOM 树的一部分。单击处理程序只能绑定到其父元素。

要实现所需的功能，需要解决方法：

创建一个子元素，例如，并将其放在紧接着开头的位置
将 CSS 样式应用于 .p span 而不是 p:before。
将点击处理程序绑定到 .p span 元素。

这种方法本质上是模拟伪元素的行为，同时允许对感兴趣的特定区域进行事件处理。

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