css屬性pointer-events實現(xiàn)點擊穿透的示例代碼
發(fā)布時間：2023-07-19 16:21:45 作者： 彭世瑜 
我要評論
我要評論本文主要介紹了css屬性pointer-events實現(xiàn)點擊穿透的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
pointer-events CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target
常用屬性
/* Keyword values */ pointer-events: auto; /* 與pointer-events屬性未指定時的表現(xiàn)效果相同 */ 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>
點擊紅色部分 事件觸發(fā)順序
boxRed click boxYellow click boxGreen click
點擊黃色部分 事件觸發(fā)順序
boxYellow click boxGreen click
點擊綠色部分 事件觸發(fā)順序
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>
點擊綠色部分 事件觸發(fā)順序
boxGreen click
點擊黃色部分 事件觸發(fā)順序
boxYellow click boxGreen click
點擊紅色部分 事件觸發(fā)順序
boxRed click boxGreen click
如果設置css屬性
.box-red {
position: absolute;
right: 0;
width: 300px;
height: 250px;
background-color: red;
/* 取消鼠標事件 */
pointer-events: none;
}點擊紅色區(qū)域，只會觸發(fā)如下事件，實現(xiàn)了穿透效果
boxGreen click
參考
css 點擊穿透 pointer-events: none；一般用于遮罩
到此這篇關于css屬性pointer-events實現(xiàn)點擊穿透的示例代碼的文章就介紹到這了,更多相關css pointer-events點擊穿透內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了使用css屬性屏蔽鼠標事件(鼠標點擊可穿透上層元素)的相關知識，本文通過截圖實例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借2020-04-03使用CSS的pointer-events屬性實現(xiàn)鼠標穿透效果的神奇技巧
當pointer-events的值設置為none之后,瀏覽器將不會獲得鼠標在當前位置的層上的點擊事件,而造成鼠標穿透的效果!下面就來為大家展開講解一下使用CSS的pointer-events屬性實現(xiàn)2016-06-28- 本文給大家分享CSS樣式穿透的幾種方法，結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-10-30
