Firefox 3.6 增加了对pointer-events的支持。Opera和safari都可以对svg的pointer-events属性做出支持,这次Firefox把他扩展到了常见的HTML元素上。
pointer-events的语法为
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
其中auto和none可针对所有的元素使用,其它的值只针对SVG。
(as of Firefox 3.6, only the values auto and none apply to all elements. The other values only apply to SVG and behave like auto in other XML and HTML content.)
当使用none的时候,当前节点下的所有子节点不接受event事件。反之则接受。
例如当pointer-events为none时:
#test { pointer-events:none; } #test:hover { background: red; }
鼠标移动到p节点上时将没有不会触发任何事件。
值为auto时:pointer-events/auto.htm
值为none时:pointer-events/none.htm
不过针对HTML元素是Firefox自己创造的新玩意。 :)
参考:
http://www.w3.org/TR/SVG/interact.html#PointerEventsProperty
http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/
https://developer.mozilla.org/en/CSS/pointer-events