css：css属性pointer-events实现点击穿透
创始人
2024-03-22 03:42:56
0次
文档
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
常用属性
/* Keyword values */
pointer-events: auto; /* 与pointer-events属性未指定时的表现效果相同 */
pointer-events: none; /* 元素永远不会成为鼠标事件的target *//* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
案例一
看一段 css 和 js 代码，由里到外嵌套
点击红色部分 事件触发顺序
boxRed click
boxYellow click
boxGreen click
点击黄色部分 事件触发顺序
boxYellow click
boxGreen click
点击绿色部分 事件触发顺序
boxGreen click
案例二
修改一下布局，外层相对定位，内层绝对定位
点击绿色部分 事件触发顺序
boxGreen click
点击黄色部分 事件触发顺序
boxYellow click
boxGreen click
点击红色部分 事件触发顺序
boxRed click
boxGreen click
如果设置css属性
.box-red {position: absolute;right: 0;width: 300px;height: 250px;background-color: red;/* 取消鼠标事件 */pointer-events: none;
}
点击红色区域，只会触发如下事件，实现了穿透效果
boxGreen click
参考
css 点击穿透 pointer-events: none；一般用于遮罩
相关内容
热门资讯
全国人大常委会关于《中华人民共...
全国人民代表大会常务委员会关于 《中华人民共和国刑事诉讼法》 第二百九十二条的解释 （2025年12...
渊亭信息科技申请基于检索增强生...
国家知识产权局信息显示，厦门渊亭信息科技有限公司申请一项名为“基于检索增强生成的智能政策问答方法、系...
政策纾困与转型升级并举，中国乳...
乳制品行业是一二三产业深度融合的重要行业。近日，商务部一则公告引发外界对于这一行业发展形势的关注。 ...
重庆荣豪律师事务所：医疗纠纷处...
推荐指数：★★★★★ 在医疗纠纷频发的当下，如何高效、专业地处理医疗纠纷成为众多患者及其家属、医疗机...
（图表）三部重要法律案将提请2...
新华社图表，北京，2025年12月27日 十四届全国人大常委会第十九次会议12月27日表决通过相关...
《财经智库》总裁张燕冬：坚定的...
由三亚市人民政府主办，《财经》杂志、财经网、《财经智库》、三亚中央商务区管理局、三亚经济研究院共同承...
无证售烟：不起诉，亦须受罚！
“未办理烟草专卖零售许可证销售卷烟，为何未追究刑事责任但是被行政处罚？”面对涉案商户的疑问，仁怀市人...
尚福林：要完善长期资本投早、投...
中国财富管理50人论坛理事长、原银监会主席尚福林12月27日在中国财富管理50人论坛2025年会（十...
原创 美...
网友私信：近期火热的美国斩杀线事件，南生怎么禁声了呢？原因很简单，这个问题在2023年4月份那篇介绍...
纽约商品交易所理事会主席Wil...
由三亚市人民政府主办，《财经》杂志、财经网、《财经智库》、三亚中央商务区管理局、三亚经济研究院承办的...