在某個專案中，很多元素需要定位在一個地圖層上面，這裡就要用到很多絕對定位或者相對定位的元素，但是這樣的話，這些浮在上面的div或者其它元素一般都會給個寬高，或者relative的元素可以不給寬高，這個時候，這些元素就會蓋住下面的地圖層，以至於地圖層無法操作。。。

然後正好在Google map見到了類似的問題，拿來當例子來說：

Google map中左上角的操作區域佔位是挺大的，如紅色框區域，然後在這個區域是無法操作地圖層的。那麼我們就可以給這個div設定 pointer-events:none，然後你就會發現下面的地圖就可以拖動和點選了。

但是悲劇的是，操作區域本身卻無法操作了，直接被無視掉了。不過不用擔心，我們可以給裡面的元素重新設定為 pointer-events:auto，當然，只給需要操作的元素區域設定。

貌似有點兒糾結，不過這樣可以保證地圖本身的可操作區域最大化。

嗯，上面只是個簡單的例子，來看下具體用法：

pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

pointer-events屬性有很多值，但是對於瀏覽器來說，只有auto和non兩個值可用，其它的幾個是針對SVG的(本身這個屬性就來自於SVG技術)。

pointer-events屬性值詳解

  • auto——效果和沒有定義pointer-events屬性相同，滑鼠不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。
  • none——元素不再是滑鼠事件的目標，滑鼠不再監聽當前層而去監聽下面的層中的元素。但是如果它的子元素設定了pointer-events為其它值，比如auto，滑鼠還是會監聽這個子元素的。
  • 其它屬性值為SVG專用，這裡不再多介紹了。

瀏覽器相容性

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支援這個CSS3屬性，IE6/7/8/9都不支援，Opera在SVG中支援該屬性但是HTML中不支援。好吧，還是有點兒悲催～～