怎么使用css屬性屏蔽鼠標(biāo)事件-創(chuàng)新互聯(lián)

小編給大家分享一下怎么使用css屬性屏蔽鼠標(biāo)事件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站建設(shè)、手機(jī)網(wǎng)站開(kāi)發(fā)、網(wǎng)頁(yè)設(shè)計(jì)、成都品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)制作、做網(wǎng)站、建網(wǎng)站。創(chuàng)新互聯(lián)建站擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺(jué)設(shè)計(jì)專(zhuān)才。

起源：前幾天測(cè)試發(fā)來(lái)一個(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)？感覺(jué)觸碰到我一直忽視的知識(shí)盲區(qū)了。

懵逼的我一頓操作猛如虎，開(kāi)啟面向谷歌編程大法…

事實(shí)證明科學(xué)上網(wǎng)很重要，谷歌精準(zhǔn) > 百度精準(zhǔn)，再次吐槽百度的廣告…

為了解決被icon圖標(biāo)遮蓋住的內(nèi)容框區(qū)域也能響應(yīng)點(diǎn)擊事件，可以使用poniter-events的css屬性來(lái)實(shí)現(xiàn)。

poniter-events屬性的值很多，但大部分和svg有關(guān)直接跳過(guò)，通用的屬性值有兩個(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ā)父元素的事件偵聽(tīng)器。

再關(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+

看到這里，基本上就能解決我這次所遇到的問(wèn)題了：

解決完問(wèn)題，又有個(gè)新的疑惑冒了出來(lái)，除了讓鼠標(biāo)點(diǎn)擊穿透外層遮層外，poniter-events還有什么常見(jiàn)的應(yīng)用場(chǎng)景么？

考慮到none值的作用，應(yīng)該可以取消掉事件的點(diǎn)擊行為。比如：使a標(biāo)簽鏈接不可點(diǎn)擊、避免按鈕多次點(diǎn)擊、表單重復(fù)提交等。除此以外，肯定還有很多其他應(yīng)用，可以通過(guò)屬性值去發(fā)掘。

看完了這篇文章，相信你對(duì)“怎么使用css屬性屏蔽鼠標(biāo)事件”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁(yè)題目：怎么使用css屬性屏蔽鼠標(biāo)事件-創(chuàng)新互聯(lián)
URL地址：http://bm7419.com/article24/ipdje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、微信小程序、用戶(hù)體驗(yàn)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)