我們在 HTML 開發時可能會遇到這樣的情況：頁面上有一些元素使用絕對定位布局，這些元素可能會遮蓋住它們位置下方的某個元素的部分或者全部。默認情況下，下方元素被遮擋的部分是不會響應鼠標事件的。
但有時我們可能需要被遮蓋住的元素仍然能夠處理鼠標事件。 比如：我們在一個地圖組件上覆蓋了一個顯示信息的元素，但又不想讓這個信息面板影響下方地圖的拖動等操作。那么我們可以使用一個叫 pointer-events 的 css 屬性來實現。
一、pointer-events 屬性介紹
1，屬性值說明
pointer-events 是 CSS3 中新增的一個屬性，其支持的值大多都與 SVG 相關，我們不用理會。對我們來說，主要關注：none|auto 這兩個屬性值。
- auto：與 pointer-events 屬性未指定時的表現效果相同。
- none：該元素永遠不會成為鼠標事件的 target。但是，當其后代元素的 pointer-events 屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。
pointer-events:none 注意事項：
使用 pointer-events:none 來阻止元素成為鼠標事件目標不一定意味着元素上的事件偵聽器永不會觸發。
如果元素后代明確指定了 pointer-events 屬性並允許其成為鼠標事件的目標，那么指向該元素的任何事件在事件傳播過程中都將通過父元素，並以適當的方式觸發其上的事件偵聽器。
當然位於屏幕上在父元素上但不在后代元素上的鼠標活動都不會被父元素和后代元素捕獲（將會穿過父元素而指向位於其下面的元素）。
使用 pointer-events:none 來阻止元素成為鼠標事件目標不一定意味着元素上的事件偵聽器永不會觸發。
如果元素后代明確指定了 pointer-events 屬性並允許其成為鼠標事件的目標，那么指向該元素的任何事件在事件傳播過程中都將通過父元素，並以適當的方式觸發其上的事件偵聽器。
當然位於屏幕上在父元素上但不在后代元素上的鼠標活動都不會被父元素和后代元素捕獲（將會穿過父元素而指向位於其下面的元素）。
2，瀏覽器兼容情況
（1）桌面瀏覽器
- IE：11+（IE6~IE10均不支持）
- Firefox：3.6＋
- Chrome：4.0+
- Safari：6.0
- Opera：15.0
（2）移動設備瀏覽器
- iOS Safari：6.0
- Android Browser：2.1+
- Android Chrome：18.0+
二、使用樣例
1，讓鏈接不能點擊
這里將第二個 a 標簽 pointer-events 樣式屬性設置為 none，那么該鏈接不僅無法被點擊，而且沒有鼠標手形樣式。（同樣的，我們可以使用該樣式來避免按鈕多次點擊、表單重復提交等問題。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.hangge.com">可以點擊的鏈接</a></li>
<li><a href="http://www.hangge.com" style="pointer-events:none">不能點擊的鏈接</a></li>
</ul>
</body>
</html>
2，讓鼠標點擊穿透上方的 div
（1）效果圖
- 下面樣例中黃色半透明的 div 使用絕對定位，覆蓋在鏈接的上方。
- 默認情況下，黃色區域下方的鏈接我們是沒法點擊到的。
- 這里我們對黃色 div 加上一個 pointer-events 屬性后，就可以穿過該層去點擊下面的 a 標簽了。
（2）樣例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top {
width: 100px;
height: 90px;
position: absolute;
top: 0;
left: 65px;
background: yellow;
opacity: 0.5;
pointer-events: none;
}
</style>
</head>
<body>
<!-- 下方的鏈接 -->
<ul>
<li><a href="http://www.hangge.com">航歌</a></li>
<li><a href="http://www.hangge.com">hangge.com</a></li>
</ul>
<!-- 上方黃色div -->
<div class="top"></div>
</body>
</html>