最近發(fā)現(xiàn)了一個(gè)叫pointer-events的css屬性，是一個(gè)與javascript有關(guān)的屬性，pointer-events直譯為指針事件，當(dāng)把值設(shè)置為none后，他有如下相關(guān)特性。
- 阻止用戶(hù)的點(diǎn)擊動(dòng)作產(chǎn)生任何效果
- 阻止缺省鼠標(biāo)指針的顯示
- 阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
- 阻止JavaScript點(diǎn)擊動(dòng)作觸發(fā)的事件
一條CSS可以做許多事情是不是很神奇，我們?cè)诳匆幌录嫒菪郧闆r如何。
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)簽不僅無(wú)法被點(diǎn)擊，而且沒(méi)有鼠標(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)簽之上，無(wú)法點(diǎn)擊到a標(biāo)簽。
如果我們給上方的top層加上一個(gè)pointer-events屬性后：
.top {
pointer-events: none;
}
我們就可以穿過(guò)top層去點(diǎn)擊下面的a標(biāo)簽了，此時(shí)這個(gè)top層如果有顏色的話相當(dāng)于可看不可摸了。
為什么說(shuō)這個(gè)屬性非常的實(shí)用呢，在許多網(wǎng)站上過(guò)節(jié)的時(shí)候頁(yè)面最上層會(huì)用canvas繪制的雨、雪花，避免這些懸浮物遮擋住頁(yè)面從而影響鼠標(biāo)點(diǎn)擊，可以使用pointer-events=none屬性，讓這些上方的canvas不會(huì)遮擋鼠標(biāo)事件，讓鼠標(biāo)事件可以穿透上方的canvas來(lái)點(diǎn)擊頁(yè)面。
