css：css属性pointer-events实现点击穿透

文档

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 代码，由里到外嵌套

<style>.box-green {width: 800px;height: 300px;background-color: green;}.box-yellow {width: 500px;height: 250px;background-color: yellow;}.box-red {width: 300px;height: 200px;background-color: red;}</style><divclass="box-green"id="box-green"><divclass="box-yellow"id="box-yellow"><divclass="box-red"id="box-red"></div></div></div><script>let boxGreen = document.querySelector('#box-green')let boxYellow = document.querySelector('#box-yellow')let boxRed = document.querySelector('#box-red')boxGreen.addEventListener('click', function () {console.log('boxGreen click')})boxYellow.addEventListener('click', function () {console.log('boxYellow click')})boxRed.addEventListener('click', function () {console.log('boxRed click')})</script>

点击红色部分 事件触发顺序

boxRed click
boxYellow click
boxGreen click

点击黄色部分 事件触发顺序

boxYellow click
boxGreen click

点击绿色部分 事件触发顺序

boxGreen click

案例二

修改一下布局，外层相对定位，内层绝对定位

<style>.box-green {width: 800px;height: 300px;background-color: green;position: relative;}.box-yellow {position: absolute;left: 0;width: 300px;height: 250px;background-color: yellow;}.box-red {position: absolute;right: 0;width: 300px;height: 250px;background-color: red;}</style><divclass="box-green"id="box-green"><divclass="box-yellow"id="box-yellow"></div><divclass="box-red"id="box-red"></div></div><script>let boxGreen = document.querySelector('#box-green')let boxYellow = document.querySelector('#box-yellow')let boxRed = document.querySelector('#box-red')boxGreen.addEventListener('click', function () {console.log('boxGreen click')})boxYellow.addEventListener('click', function () {console.log('boxYellow click')})boxRed.addEventListener('click', function () {console.log('boxRed click')})</script>

点击绿色部分 事件触发顺序

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；一般用于遮罩

css：css属性pointer-events实现点击穿透相关推荐

div点击穿透,CSS属性pointer-events :none;实现护眼模式, 夜间模式遮罩
.div-xx{ pointer-events :none;/*取消事件,点击穿透*/ } pointer-events , css属性值 auto--效果和没有定义pointer-events属性相 ...
CSS pointer-events属性的使用
楔子在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉.其中动画是最常用的方法. 这里的需求是,弹层的设计,这个弹层希望可以像 native 上的弹层 ...
将CSS CLIP属性应用在：扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加 ...
css环形进度条clip,使用CSS clip 属性实现音频播放圆环进度条
这是效果突然有需求要做一个圆环的音频播放进度条(上图效果),自己琢磨尝试了半天,也没有实现.最后度娘一下,才知道css还有一个clip属性,完美实现需求.分享一下,说不定能帮其它小伙伴.至于有没有用 ...
利用css transition属性实现一个带动画显隐的微信小程序部件
我们先来看效果图像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会 ...
[css] css中Scroll-behavior属性有什么应用场景？
[css] css中Scroll-behavior属性有什么应用场景? 当用户手动点击导航或者API调用导致触发滚动操作时,scroll-behavior属性可以为滚动框设定滚动行为.auto表示立即 ...
前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
div增加鼠标点透，css设置点击穿透
需求:将一张照片盖到一个div上面,但同时下面div上面的点击事件不受影响. 这样就需要用到 CSS 的鼠标穿透属性:pointer-events: none,下面主要对pointer-events属 ...

css：css属性pointer-events实现点击穿透

案例一

案例二

css：css属性pointer-events实现点击穿透相关推荐

最新文章

热门文章