js给伪元素添加点击事件的2种方式

博客围绕在HTML元素中给伪元素添加点击事件的需求展开,介绍了两种实现方式。一是给元素设pointer-events:none,伪元素设pointer-events:auto;二是利用子元素事件冒泡原理,子元素事件处理后return false屏蔽父元素接收事件,点击伪元素触发父元素事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在html元素种   我们有可能遇到这样的需求 :如何给伪元素添加点击事件?

  经过思考及查找相应的资料后,整理初2种方式,记录一下:

一、给元素设置pointer-events:none.然后给伪元素的pointer-events:auto;此时我们把点击元素的事件就取消了 点击伪元素的时候,就可以绑定相应的事件了

二、第二种是:通过子元素的事件冒泡原理,在子元素事件处理结束后return false,告知父元素事件处理完毕。这样只就屏蔽了父元素接收事件,然后:after伪元素是悬浮在子元素上面的,故点击伪元素的时候触发父元素事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值