我們在 HTML 開發(fā)時可能會遇到這樣的情況：頁面上有一些元素使用 絕對定位 布局，這些元素可能會遮蓋住它們位置下方的某個元素的部分或者全部。默認情況下，下方元素被遮擋的部分是不會響應(yīng)鼠標事件的。

但有時我們可能需要被遮蓋住的元素仍然能夠處理鼠標事件。 比如：我們在一個地圖組件上覆蓋了一個顯示信息的元素，但又不想讓這個信息面板影響下方地圖的拖動等操作。那么我們可以使用一個叫 pointer-events 的 css 屬性來實現(xiàn)。

pointer-events 屬性介紹

pointer-events是 CSS3 中新增的一個屬性，其支持的值大多都與 SVG 相關(guān)，我們不用理會。對我們來說，主要關(guān)注：none/auto 這兩個屬性值。

auto：與 pointer-events 屬性未指定時的表現(xiàn)效果相同。

none：該元素永遠不會成為鼠標事件的 target。但是，當其后代元素的 pointer-events 屬性指定其他值時，鼠標事件可以指向后代元素，在這種情況下，鼠標事件將在捕獲或冒泡階觸發(fā)父元素的事件偵聽器。

pointer-events:none 注意事項：

使用 pointer-events:none 來阻止元素成為鼠標事件目標不一定意味著元素上的事件偵聽器永不會觸發(fā)。

如果元素后代明確指定了 pointer-events 屬性并允許其成為鼠標事件的目標，那么指向該元素的任何事件在事件傳播過程中都將通過父元素，并以適當?shù)姆绞接|發(fā)其上的事件偵聽器。

當然位于屏幕上在父元素上但不在后代元素上的鼠標活動都不會被父元素和后代元素捕獲(將會穿過父元素而指向位于其下面的元素)。

用法

給定位的盒子設(shè)置 pointer-events: none ;

給定位盒子有需要點擊事件的子盒子設(shè)置 pointer-events: auto；