DIV CSS 佈局教程網

其實早知道這個屬性，但是一直沒有去研究過。今天正好在twitter看到這個詞，就去研究了下，正好解決了目前遇到的一個小難題，所以分享下。嗯，其實這是個比較簡單的CSS3屬性。

在某個項目中，很多元素需要定位在一個地圖層上面，這裡就要用到很多絕對定位或者相對定位的元素，但是這樣的話，這些浮在上面的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中不支持。好吧，還是有點兒悲催～～