這篇文章給大家分享的是有關(guān)css3中pointer-events有什么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
pointer-events 是什么？
顧名思義，pointer-events 是一個(gè)用于 HTML 指針事件的屬性。
pointer-events 可以禁用 HTML 元素的 hover/focus/active 等動(dòng)態(tài)效果。
默認(rèn)值為 auto，語(yǔ)法：
代碼如下:
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、切換開(kāi)/關(guān)按鈕狀態(tài)
點(diǎn)擊提交按鈕的時(shí)候，為了防止用戶(hù)一直點(diǎn)擊按鈕，發(fā)送請(qǐng)求，當(dāng)請(qǐng)求未返回結(jié)果之前，給按鈕增加 pointer-events: none，可以防止這種情況，這種情況在業(yè)務(wù)中也十分常見(jiàn)。
重慶分公司
重慶分公司
.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 兼容性
感謝各位的閱讀！關(guān)于“css3中pointer-events有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
