请看这把小提琴:http://jsfiddle.net/ZWw3Z/5/

我的代码是:

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

p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
}
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>

我只想在伪元素(红色位)上触发一个点击事件.也就是说,我不希望点击事件在蓝色位被触发.

推荐答案

这是不可能的;伪元素根本不是DOM的一部分,所以不能直接将任何事件绑定到它们,只能绑定到它们的父元素.

如果必须只在红色区域上有一个单击处理程序,则必须创建一个子元素,如span,将其放置在开头<p>标记的正后方,将样式应用于p span而不是p:before,并绑定到它.

Javascript相关问答推荐

Angular material 表多个标题行映射

使用typeof运算符获取对象值类型-接收字符串而不是数组

TypScript界面中的Infer React子props

如何从一个列表中创建一个2列的表?

如何粗体匹配的字母时输入搜索框使用javascript?

v—自动完成不显示 Select 列表中的所有项目

如何通过使用vanilla JS限制字体大小增加或减少两次来改变字体大小

为什么useState触发具有相同值的呈现

如何将innerHTML字符串修剪为其中的特定元素?

如何使用JS创建一个明暗功能按钮?

如何在 Select 文本时停止Click事件?

Reaction组件在本应被设置隐藏时仍显示

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

处理app.param()中的多个参数

JWT Cookie安全性

如何在独立的Angular 应用程序中添加Lucide-Angel?

如何在TransformControls模式下只保留箭头进行翻译?

对不同目录中的Angular material 表列进行排序

限制数组中每个元素的长度,

将字符串解释为数字;将其重新编码为另一个基数