张经纬的博客 - 中隐留司官

Firefox的新属性 pointer-events

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

加入书签:
  • QQ书签
  • 豆瓣
  • 豆瓣九点
  • Haohao
  • RSS
  • email

原文链接|

目前 还没有人评论 ,点此发表评论