pointer-events

lufficc 發布于2019-08-30 15:55 / 1327人閱讀

摘要：屬性效果和沒有定義屬性相同，鼠標不會穿透當前層。在中，該值和的效果相同。元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。其它屬性值為專用，這里不再多介紹了。

pointer-events屬性

auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。

none——元素不再是鼠標事件的目標，鼠標不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設置了pointer-events為其它值，比如auto，鼠標還是會監聽這個子元素的。

其它屬性值為SVG專用，這里不再多介紹了。

pointer-events: none

應用場景：

穿透遮罩層，拷貝文字

鼠標禁用

阻止用戶的點擊動作產生任何效果

阻止缺省鼠標指針的顯示

阻止CSS里的 hover 和 active 狀態的變化觸發事件

阻止JavaScript點擊動作觸發的事件

兼容性

參考鏈接：
CSS3 pointer-events:none應用舉例及擴展

GPU云服務器云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117322.html

css不常見屬性之pointer-events

摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網友敘帝利給出了一種使用場景。加上則不會響應事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...

peixn 2019-08-02 11:36 評論0 收藏0
css不常見屬性之pointer-events

摘要：上介紹為屬性指定在什么情況下如果有某個特定的圖形元素可以成為鼠標事件的。屬性值有其中默認屬性為。當值為表示鼠標事件穿透該元素并且指定該元素下面的任何東西。網友敘帝利給出了一種使用場景。加上則不會響應事件了。 MDN 上介紹為 CSS 屬性指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。pointer-events 屬性值有: /* Keyword va...

AndroidTraveler 2019-08-30 15:54 評論0 收藏0
pointer-events: none 在 SegmentFault 中的兩個應用場景

摘要：值得一提的是，僅僅是鼠標事件失效，用鍵還是可以選中該鏈接的，然后打開，這個時候可以去掉標簽的屬性，就不能讓鍵選中了實踐一今天改了一個眾審中心的。簡介 pointer-events: none 真是個神奇的屬性。該屬性有什么用？借用 CSS3 pointer-events:none 應用舉例及擴展的總結來說：test pointer-events: none 顧名思義，就是鼠標事...

jasperyang 2019-08-29 15:29 評論0 收藏0
踩了pointer-events:none的坑

摘要：出現一前端同事跟我說你把這段加到全局的里面然后，悲劇了，上線后發現我的圖片都不能點擊了。解決情急之下，在所有需要點擊的標簽外邊都包了一層，把點擊事件移到上，了，但是并不知道做了什么導致了這樣的問題。 bug出現：一前端同事跟我說：你把這段加到全局的css里面 img{ pointer-events: none } 然后，悲劇了，上線后發現我的圖片都不能點擊了。 bug解決：情急...

Terry_Tai 2019-08-30 15:53 評論0 收藏0
幾種HTML標簽偽元素綁定事件的方式

摘要：下面整理出幾種簡便方式實現偽元素時進行事件處理，附上例子代碼。代碼關鍵點在這里，元素禁止響應鼠標事件關鍵點在這里，偽元素覆蓋父元素的，響應鼠標事件代碼只有點擊偽元素才能觸發第二種通過阻止事件冒泡的方式實現基礎代碼同上，將和。最近項目中遇到點擊一個圖標執行某些操作的功能，本來很簡單就能實現，但圖標卻是 ::after 偽元素實現的，在印象中好像不能直接對偽元素進行 dom 操作，可項目...

BakerJ 2019-08-02 16:09 評論0 收藏0