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 兼容性
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。