css3 pointer-events 介紹

網易考拉前端團隊發表於2017-09-15

css3 pointer-events

pointer-events 是什麼?

顧名思義,pointer-events 是一個用於 HTML 指標事件的屬性。

pointer-events 可以禁用 HTML 元素的 hover/focus/active 等動態效果。

預設值為 auto,語法:

pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;複製程式碼

我們常用的 auto | none 屬性,需要注意的是,其他的屬性只有 SVG 元素適用。

auto:可以使用指標事件。
none:禁用指標事件,需要注意的是,當禁用指標的的元素有子/父元素時,在時間冒泡/捕獲階段,事件將在其子/父元素觸發。

常用場景

  1. 禁用 a 標籤事件效果
    在做 tab 切換的時候,當選中當前項,禁用當前標籤的事件,只有切換其他 tab 的時候,才重新請求新的資料。

     <!--CSS-->
     <style>
         .active{
             pointer-events: none;
         }
     </style>
     <!--HTML-->
     <ul>
         <li><a class="tab"></a></li>
         <li><a class="tab active"></a></li>
         <li><a class="tab"></a></li>
     </ul>複製程式碼
  2. 切換開/關按鈕狀態
    點選提交按鈕的時候,為了防止使用者一直點選按鈕,傳送請求,當請求未返回結果之前,給按鈕增加 pointer-events: none,可以防止這種情況,這種情況在業務中也十分常見。

     <!--CSS-->
     .j-pro{
         pointer-events: none;
     }
     <!--HTML-->
     <button r-model={this.submit()} r-class={{"j-pro": flag}}>提交</button>
     <!--JS-->
     submit: function(){
         this.data.flag = true;
         this.$request(url, {
             // ...
             onload: function(json){
                 if(json.retCode == 200){
                     this.data.flag = false;
                 }
             }.bind(this)
             // ...
         });
     }複製程式碼
  3. 防止透明元素和可點選元素重疊不能點選
    一些內容的展示區域,為了實現一些好看的 css 效果,當元素上方有其他元素遮蓋,為了不影響下方元素的事件,給被遮蓋的元素增加 pointer-events: none; 可以解決。

     <!--CSS-->
     .layer{
         backround: linear-gradient(180deg, #fff, transparent);
    
     }
     .j-pro{
         poninter-events: none;
     }
     <!--HTML-->
     <ul>
         <li class="layer j-pro"></li>
         <li class="item"></li>
         <li class="item"></li>
         <li class="item"></li>
     </ul>複製程式碼

poninter-events 相容性

image
image