欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

pointer-events_html/css_WEB-ITnose

程序员文章站 2022-04-07 16:55:39
...

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阻止了链接状态被触发或者其余一些事件的触发。

相关标签: pointer-events