css不常見屬性之pointer-events的使用方法
發(fā)布時間：2018-09-27 15:46:38 作者：侯貝貝 
我要評論
我要評論這篇文章主要介紹了css不常見屬性之pointer-events的使用方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標(biāo)事件的 target。
pointer-events 屬性值有:
/* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-events: fill; /* SVG only */ pointer-events: stroke; /* SVG only */ pointer-events: all; /* SVG only */ /* Global values */ pointer-events: inherit; pointer-events: initial; pointer-events: unset;
其中默認(rèn)屬性為 auto。 當(dāng)值為none表示鼠標(biāo)事件“穿透”該元素并且指定該元素“下面”的任何東西。
使用場景
拋卻只適用于svg的值,說一說 none 的使用場景。 mdn上的解釋不太好理解。 網(wǎng)友敘帝利 給出了一種使用場景。
我這里還有一中使用場景是 當(dāng)用div元素通過css樣式模擬按鈕時，可以使用 pointer-event: none 模擬button禁止點擊。
比如:
// html
<div class="point" onclick="alert('ok')提交申請</div>
.point {
width: 1.8rem;
height: .44rem;
margin: 0 auto;
margin-top: 0.8rem;
text-align: center;
line-height: .44rem;
border-radius: 22px;
color: #fff;
background-color: rgba(67,76,94,.43);
pointer-events: none;
}
此時該div的樣子,如果不設(shè)置pointer-events: none; 只是樣子不可點擊，點擊還是會觸發(fā)事件響應(yīng)的。 加上則不會響應(yīng)click事件了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS pointer-events屬性的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-24
本篇文章主要介紹了css3 pointer-events，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-18CSS利用pointer-events防止重復(fù)點擊的方法實例
這篇文章主要給大家介紹了關(guān)于CSS利用pointer-events防止重復(fù)點擊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者理解具有一定的參考學(xué)習(xí)價值，感興趣的朋2017-08-07使用CSS的pointer-events屬性實現(xiàn)鼠標(biāo)穿透效果的神奇技巧
當(dāng)pointer-events的值設(shè)置為none之后,瀏覽器將不會獲得鼠標(biāo)在當(dāng)前位置的層上的點擊事件,而造成鼠標(biāo)穿透的效果!下面就來為大家展開講解一下使用CSS的pointer-events屬性實現(xiàn)2016-06-28- 本文主要介紹了CSS中的pointer-events屬性的用法，十分的詳細(xì)，有需要的小伙伴參考下。2015-02-26
CSS的pointer-events屬性詳細(xì)介紹（作用和注意事項）
現(xiàn)代瀏覽器里CSS的職責(zé)范圍和JavaScript的越來越模糊分不清。比如CSS里-webkit-touch-callout屬性在iOS里能禁止當(dāng)用戶點擊時彈出氣泡框2014-04-23css pointer-events屬性實現(xiàn)下面元素可點擊
是否曾經(jīng)有過這樣的經(jīng)歷：把一個元素置于另一個元素之上，而希望下面的那個元素成為可點擊的？現(xiàn)在，利用css的pointer-events屬性即可做到。2010-04-17
