1. 程式人生 > >pointer-events的作用

pointer-events的作用

pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

預設值:auto,

auto:與pointer-events屬性未指定時的表現效果相同。在svg內容上與visiblepainted值相同

none:元素永遠不會成為滑鼠事件的target。但是,當其後代元素的pointer-events屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情況下,滑鼠事件將在捕獲或冒泡階觸發父元素的事件偵聽器。其他值只能應用在SVG上。

實際應用中,當紅色盒子絕對定位在綠色盒子之上時,給綠色盒子新增點選事件,點選紅色盒子區域正常情況下肯定不會觸發點選事件。

但是當我們給紅色盒子新增樣式屬性pointer-events:none;意思是紅色盒子將不在是滑鼠事件的target,也就是說滑鼠事件將不會作用在該元素之上,現在點選紅色盒子就會觸發點選事件了。