最近發(fā)現(xiàn)了一個(gè)叫pointer-events的css屬性仑撞，是一個(gè)與javascript有關(guān)的屬性赤兴，pointer-events直譯為指針事件，當(dāng)把值設(shè)置為none后隧哮，他有如下相關(guān)特性桶良。
- 阻止用戶的點(diǎn)擊動作產(chǎn)生任何效果
- 阻止缺省鼠標(biāo)指針的顯示
- 阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
- 阻止JavaScript點(diǎn)擊動作觸發(fā)的事件
一條CSS可以做許多事情是不是很神奇，我們在看一下兼容性情況如何沮翔。
IE 11+
Firefox 3.6＋
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+
看下實(shí)例陨帆，具體是怎么回事。html代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a >百度</a></li>
<li><a >一個(gè)不能點(diǎn)擊的鏈接</a></li>
</ul>
</body>
</html>
css代碼：
<style>
a[] {
pointer-events: none;
}
</style>
第二個(gè)a標(biāo)簽不僅無法被點(diǎn)擊采蚀，而且沒有鼠標(biāo)手形樣式疲牵。再看一個(gè)例子。
html代碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 下方div -->
<div class="bottom">
<a href="www.baidu.com">bottom-百度</a>
</div>
<!-- 上方div -->
<div class="top"></div>
</body>
</html>
CSS代碼：
<style>
.bottom {
background: yellow;
width: 100px;
height: 100px;
}
.top {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
</style>
此時(shí)由于top的div位于a標(biāo)簽之上榆鼠，無法點(diǎn)擊到a標(biāo)簽纲爸。
如果我們給上方的top層加上一個(gè)pointer-events屬性后：
.top {
pointer-events: none;
}
我們就可以穿過top層去點(diǎn)擊下面的a標(biāo)簽了，此時(shí)這個(gè)top層如果有顏色的話相當(dāng)于可看不可摸了（可念不可說哈哈）妆够。
為什么說這個(gè)屬性非常的實(shí)用呢识啦，在許多網(wǎng)站上過節(jié)的時(shí)候頁面最上層會用canvas繪制的雨、雪花责静，避免這些懸浮物遮擋住頁面從而影響鼠標(biāo)點(diǎn)擊袁滥，可以使用pointer-events=none屬性，讓這些上方的canvas不會遮擋鼠標(biāo)事件灾螃，讓鼠標(biāo)事件可以穿透上方的canvas來點(diǎn)擊頁面题翻。怎么樣是不是很不錯(cuò)，趕緊寫個(gè)demo來試試腰鬼。
