真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css3中pointer-events有什么用

這篇文章給大家分享的是有關(guān)css3中pointer-events有什么用的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。

長(zhǎng)寧ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書未來市場(chǎng)廣闊!成為創(chuàng)新互聯(lián)的ssl證書銷售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:18980820575(備注:SSL證書合作)期待與您的合作!

pointer-events 是什么?

顧名思義,pointer-events 是一個(gè)用于 HTML 指針事件的屬性。

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

默認(rèn)值為 auto,語法:

代碼如下:

pointer-events: auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all;

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

auto:可以使用指針事件。

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

常用場(chǎng)景

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

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


 
 
 
         
  •      
  •      
  •  

2、切換開/關(guān)按鈕狀態(tài)

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


 .j-pro{
     pointer-events: none;
 }
 
 提交
 
 submit: function(){
     this.data.flag = true;
     this.$request(url, {
         // ...
         onload: function(json){
             if(json.retCode == 200){
                 this.data.flag = false;
             }
         }.bind(this)
         // ...
     });
 }

3、防止透明元素和可點(diǎn)擊元素重疊不能點(diǎn)擊

一些內(nèi)容的展示區(qū)域,為了實(shí)現(xiàn)一些好看的 css 效果,當(dāng)元素上方有其他元素遮蓋,為了不影響下方元素的事件,給被遮蓋的元素增加 pointer-events: none; 可以解決。


 .layer{
     backround: linear-gradient(180deg, #fff, transparent);

 }
 .j-pro{
     poninter-events: none;
 }
 
 
                             

poninter-events 兼容性

css3中pointer-events有什么用

感謝各位的閱讀!關(guān)于“css3中pointer-events有什么用”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!


網(wǎng)頁標(biāo)題:css3中pointer-events有什么用
標(biāo)題網(wǎng)址:http://weahome.cn/article/ipgecs.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部