pointer-events

发布于 静子

pointer-events属性用于特定情况下将图形元素指定为事件目标

请注意这是一个SVG属性,在任何CSS规范中并没有定义。

pointer-events属性应用于SVG元素的值有许多个,但是只有三个值可以应用于HTML元素。

pointer-events应用于HTML元素上时,它可以用来指定元素是否可以响应鼠标(触摸)事件。它可以用来阻止点击、状态(CSS active,focus,hover状态),和游标事件(例如:在链接上显示pointer光标)

你也可以让元素响应于指针事件(auto),或者阻止响应(none)。如果你阻止元素响应于指针事件,那么该元素的子节点的元素将会成为这些事件的目标。如果你单击元素,其子节点元素将会接收该单击事件。这种情况同样适用于hover和一些其他游标操作。例如,利用pointer-events:none你可以获取一个元素的子元素中的文本(可以参考下面的实例)。

pointer-events属性在不同场景中都可以十分有用。这个属性一个很好的优点是,允许你利用pointer-events:none创建60fps 的滚动。关于它是如何工作的,Ryan Seddon写了一篇很值得一读的文章

笔记

元素上禁用指针的事件可以被子元素所覆盖: 如果元素的子元素具有pointer-events:auto,该子元素可以处理并响应单击事件,即使父元素不具有此功能。

如上文所述,pointer-events属性是一个SVG属性。尽管存在于早期用户接口模块Level 3的草稿中,它已经在该模块之中被移除并添加到Level 4之中。如果想了解更多,请点击这里

官方语法

语法

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

正式语法中的值适用于SVG元素,仅下面这三个值适用于HTML元素:

pointer-events: auto | none | inherit
  • 初始值:auto
  • 适用于:所有元素
  • 动画:无

  • auto: 默认值。可以使用指针事件。元素响应于指针事件,阻止该元素的子元素对其作出响应。
  • none: 元素上的指针事件被禁用。元素不会响应于指针事件。就像该元素不存在一样,元素的子元素响应于指针事件。
  • inherit: 元素从其父级继承pointer-events的值。

备注

关于其余值的详细信息,请参考SVG规范

实例

下面的实例将overlay元素置于整个页面,如果用户在页面上执行某些操作,例如一些Javascript方法,overlay就会就会褪变成视图。为了防止其与页面其余元素的指针事件叠加,所以我们就可以将其子元素上的事件取消。

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* ... */
    pointer-events: none;
}

这样,使用Javascript,该元素就可以褪色到视图之中,然后就可以启用事件,以便于用户可以与其进行交互。

在线实例

在下面的示例之中,overly具有pointer-events:none的属性值,所以你就可以单击它下面的锚点标记,获取文本。请注意,当你将鼠标悬停在链接上时,光标如何变成了一个指针(手型)?原因在于其上的悬停状态被触发。

尝试将none值更改为auto,观察它如何使overlay阻止了链接状态被触发或者其余一些事件的触发。

浏览器支持

扩展阅读

本文根据@Sara Soueidan的《pointer-events》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://tympanus.net/codrops/css_reference/pointer-events

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

如需转载,烦请注明出处:https://www.fedev.cn/css3/css-reference/pointer-events.htmljordan retro 11 mens kids