武林網(www.49028c.com)文章簡介：CSS3 pointer-events介紹.

其實早知道這個屬性，但是一直沒有去研究過。今天正好在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技術)。

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