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