css3的pointer-events使用詳解

來源:互聯網
上載者:User
這次給大家帶來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 相容性

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

虛擬元素::before與::after使用詳解

CSS3做出無縫輪播廣告

CSS3實現瀑布流布局的方法

相關文章

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.