当前位置:Gxlcms > html代码 > pointer-events_html/css_WEB-ITnose

pointer-events_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:38人阅读

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

人气教程排行