css3 pointer-events 介紹

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