js教程

:after,:before伪元素可以绑定JS点击事件吗?

我的站长站 2023-09-16 人阅读

我们在前端开发中常常会用到CSS :after,:before伪元素在结尾或开头生成一个icon图标按钮,这样写很方便,不用在找图片,如:

a:before{
content:'\260E';
display:block;
width:10px;
height:10px;
}

不能绑定JS点击事件

但是在JS中我们可以给这个生成的icon图标按钮绑定一个点击事件吗?

答案是不行,因为因为:after和:before不是真正的dom,无法响应DOM事件,js无法获取到他们,所以,无法绑定dom事件。

解决方法

如果需要:after 和:before伪元素绑定点击事件,可以用一个dom标签包含,把事件绑定给dom元素,如:

<div><a></a></div>



最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前