使用css屬性屏蔽鼠標(biāo)事件的方法(鼠標(biāo)點(diǎn)擊可穿透上層元素)
我要評(píng)論起源：前幾天測(cè)試發(fā)來一個(gè)需求，內(nèi)容要求看圖：
看到這個(gè)需求，我有點(diǎn)懵逼。現(xiàn)在的情況是只有點(diǎn)擊日期內(nèi)容框空白區(qū)域時(shí)，才會(huì)響應(yīng)點(diǎn)擊事件顯示下拉日期菜單。
而這個(gè)icon圖標(biāo)我是絕對(duì)定位到日期內(nèi)容框中的，它的圖層維度是高于日期內(nèi)容框的，點(diǎn)擊icon圖標(biāo)時(shí)是不會(huì)響應(yīng)點(diǎn)擊事件的。我的第一個(gè)反應(yīng)是事件點(diǎn)擊穿透，但是該怎么實(shí)現(xiàn)？感覺觸碰到我一直忽視的知識(shí)盲區(qū)了。
懵逼的我一頓操作猛如虎，開啟面向谷歌編程大法…
事實(shí)證明科學(xué)上網(wǎng)很重要，谷歌精準(zhǔn) > 百度精準(zhǔn)，再次吐槽百度的廣告…
為了解決被icon圖標(biāo)遮蓋住的內(nèi)容框區(qū)域也能響應(yīng)點(diǎn)擊事件，可以使用poniter-events的css屬性來實(shí)現(xiàn)。
poniter-events屬性的值很多，但大部分和svg有關(guān)直接跳過，通用的屬性值有兩個(gè)none | auto。
auto：與 pointer-events 屬性未指定時(shí)的表現(xiàn)效果相同。none：該元素永遠(yuǎn)不會(huì)成為鼠標(biāo)事件的 target。但是，當(dāng)其后代元素的 pointer-events 屬性指定其他值時(shí)，鼠標(biāo)事件可以指向后代元素，在這種情況下，鼠標(biāo)事件將在捕獲或冒泡階觸發(fā)父元素的事件偵聽器。
再關(guān)注下poniter-events的兼容情況：
桌面瀏覽器
IE：11+（IE6~IE10均不支持）Firefox：3.6＋Chrome：4.0+Safari：6.0Opera：15.0
移動(dòng)設(shè)備瀏覽器
iOS Safari：6.0Android Browser：2.1+Android Chrome：18.0+
看到這里，基本上就能解決我這次所遇到的問題了：
解決完問題，又有個(gè)新的疑惑冒了出來，除了讓鼠標(biāo)點(diǎn)擊穿透外層遮層外，poniter-events還有什么常見的應(yīng)用場(chǎng)景么？
考慮到
none值的作用，應(yīng)該可以取消掉事件的點(diǎn)擊行為。比如：使a標(biāo)簽鏈接不可點(diǎn)擊、避免按鈕多次點(diǎn)擊、表單重復(fù)提交等。除此以外，肯定還有很多其他應(yīng)用，可以通過屬性值去發(fā)掘。
總結(jié)
到此這篇關(guān)于使用css屬性屏蔽鼠標(biāo)事件(鼠標(biāo)點(diǎn)擊可穿透上層元素)的文章就介紹到這了,更多相關(guān)css 屬性屏蔽鼠標(biāo)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css屬性pointer-events實(shí)現(xiàn)點(diǎn)擊穿透的示例代碼
本文主要介紹了css屬性pointer-events實(shí)現(xiàn)點(diǎn)擊穿透的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2023-07-19使用CSS的pointer-events屬性實(shí)現(xiàn)鼠標(biāo)穿透效果的神奇技巧
當(dāng)pointer-events的值設(shè)置為none之后,瀏覽器將不會(huì)獲得鼠標(biāo)在當(dāng)前位置的層上的點(diǎn)擊事件,而造成鼠標(biāo)穿透的效果!下面就來為大家展開講解一下使用CSS的pointer-events屬性實(shí)現(xiàn)2016-06-28- 本文給大家分享CSS樣式穿透的幾種方法，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-10-30