CSS3 超實用屬性：pointer-events阻止使用者的點選動作產生任何效果
阿新 • • 發佈：2018-12-21
pointer-events的css屬性，是一個與javascript有關的屬性，pointer-events直譯為指標事件，當把值設定為none後，他有如下相關特性。
- 阻止使用者的點選動作產生任何效果
- 阻止預設滑鼠指標的顯示
- 阻止CSS裡的hover和active狀態的變化觸發事件
- 阻止JavaScript點選動作觸發的事件
一條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+
看下例項，具體是怎麼回事。html程式碼：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li><a href="https://www.baidu.com/">百度</a></li>
<li><a href="http://example.com">一個不能點選的連結</a></li>
</ul>
</body>
</html>
css程式碼：
<style>
a[href="http://example.com"] {
pointer-events: none;
}
</style>
第二個a標籤不僅無法被點選，而且沒有滑鼠手形樣式。再看一個例子。
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>
此時由於top的div位於a標籤之上，無法點選到a標籤。
效果圖
如果我們給上方的top層加上一個pointer-events屬性後：
.top {
pointer-events: none;
}
我們就可以穿過top層去點選下面的a標籤了，此時這個top層如果有顏色的話相當於可看不可摸了（可念不可說哈哈）。
在許多頁面最上層會用canvas繪製圖層，避免這些懸浮物遮擋住頁面從而影響滑鼠點選，可以使用pointer-events=none屬性，讓這些上方的canvas不會遮擋滑鼠事件，讓滑鼠事件可以穿透上方的canvas來點選頁面.