如何使用CSS的pointer-events屬性實現滑鼠穿透效果

來源:互聯網
上載者:User
這篇文章主要介紹了關於如何使用CSS的pointer-events屬性實現滑鼠穿透效果,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

當pointer-events的值設定為none之後,瀏覽器將不會獲得滑鼠在當前位置的層上的點擊事件,而造成滑鼠穿透的效果!下面就來為大家展開講解一下使用CSS的pointer-events屬性實現滑鼠穿透效果的神奇技巧

現代瀏覽器裡CSS的職責範圍和JavaScript的越來越模糊分不清。比如CSS裡-webkit-touch-callout屬性在iOS裡能禁止當使用者點擊時彈出氣泡框。而本文要說的pointer-events的風格更像JavaScript,它能夠:
1.阻止使用者的點擊動作產生任何效果
2.阻止預設滑鼠指標的顯示
3.阻止CSS裡的hover和active狀態的變化觸發事件
4.阻止JavaScript點擊動作觸發的事件
一個CSS屬效能做所有的這麼多事情!

當使用pointer-events:none,表示它將捕獲不到任何點擊,而只是讓事件穿透到它的下面。代碼如下:

<style>    .overlay {     pointer-events: none;    }   </style>   <p id="overlay" class="overlay"></p>

如果值是auto,則效果和沒有定義pointer-events屬性相同,滑鼠不會穿透當前層。在SVG中,該值和visiblePainted的效果相同。

這個pointer-events屬性有很多可以使用的屬性值,但大部分都是針對SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。

一些需要注意的關於pointer-events的事項:
1.子項目可以聲明pointer-events來解禁父元素的阻止滑鼠事件節流。
2.如果你對一個元素設定了click事件監聽器,然後你移除了pointer-events樣式聲明,或把它的值改變為auto,監聽器會重新生效。基本上,監聽器會遵守pointer-events的設定。

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.