0
点赞
收藏
分享

微信扫一扫

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>

<div
class="box-green"
id="box-green"
>
<div
class="box-yellow"
id="box-yellow"
>
<div
class="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>

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

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

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>

<div
class="box-green"
id="box-green"
>
<div
class="box-yellow"
id="box-yellow"
></div>

<div
class="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>

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

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

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


举报

相关推荐

0 条评论