css3 pointer-events 介紹詳解

發(fā)布時間：2017-09-18 14:42:03 作者：網(wǎng)易考拉海購

我要評論

本篇文章主要介紹了css3 pointer-events，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

pointer-events 是什么？

顧名思義，pointer-events 是一個用于 HTML 指針事件的屬性。

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

默認值為 auto，語法：

復(fù)制代碼

代碼如下:

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

auto：可以使用指針事件。

none：禁用指針事件，需要注意的是，當(dāng)禁用指針的的元素有子/父元素時，在時間冒泡/捕獲階段，事件將在其子/父元素觸發(fā)。

常用場景

1、禁用 a 標(biāo)簽事件效果

在做 tab 切換的時候，當(dāng)選中當(dāng)前項，禁用當(dāng)前標(biāo)簽的事件，只有切換其他 tab 的時候，才重新請求新的數(shù)據(jù)。

<!--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、切換開/關(guān)按鈕狀態(tài)

點擊提交按鈕的時候，為了防止用戶一直點擊按鈕，發(fā)送請求，當(dāng)請求未返回結(jié)果之前，給按鈕增加 pointer-events: none，可以防止這種情況，這種情況在業(yè)務(wù)中也十分常見。

<!--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、防止透明元素和可點擊元素重疊不能點擊

一些內(nèi)容的展示區(qū)域，為了實現(xiàn)一些好看的 css 效果，當(dāng)元素上方有其他元素遮蓋，為了不影響下方元素的事件，給被遮蓋的元素增加 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 兼容性