1. 首页
  2. css

CSS指针事件

pointer-events属性允许控制HTML元素如何响应鼠标/触摸事件,包括CSS悬停/活动状态、Javascript中的单击/点击事件以及光标是否可见。
.avoid-clicks {pointer-events: none;}
虽然pointer-events属性接受11个可能的值,但除3个外,其余所有值都保留用于SVG。任何HTMl元素的三个有效值是:
– none阻止所有单击,指定HTML元素上的状态和光标选项恢复默认功能(对于指定了pointer-events: none;的元素的子元素非常有用),如上所示,6***将使用元素父元素的pointer-events值,pointer-events的主要用例是允许单击或点击行为在Z轴上将一个元素\”穿过\”到它下面的另一个元素。例如,这对于图形覆盖或使用opacity隐藏元素(例如工具提示)很有用,并且仍然允许在其下面的内容上选择文本。兴趣点\”在CSS中对非svg元素使用指针事件是实验性的。此功能以前是CSS3 UI草稿规范的一部分,但由于许多未解决的问题,已推迟到CSS4。\”-Mozilla MDN\”如果向元素添加click事件侦听器,则删除指针事件样式(或将其值更改为auto),click事件将触发指定的功能。基本上,click事件尊重指针事件值。\”—David Walshcaniuse.com网站兼容性表Mozilla Docs这个浏览器支持数据来自Caniuse,它有更多的细节。数字表示浏览器支持该版本及更高版本的功能。桌面上使用时支持更深一些,例如IE 9
– \”在CSS中对非svg元素使用指针事件是实验性的。此功能以前是CSS3 UI草稿规范的一部分,但由于许多未解决的问题,已推迟到CSS4。\”-Mozilla MDN
– \”如果向元素添加click事件侦听器,则删除指针事件样式(或将其值更改为auto),click事件将触发指定的功能。基本上,click事件尊重指针事件值。\”—David Walshcaniuse.com网站兼容性表Mozilla Docs这个浏览器支持数据来自Caniuse,它有更多的细节。数字表示浏览器支持该版本及更高版本的功能。桌面上使用时支持更深一些,例如IE 9

CSS指针事件 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%8c%87%e9%92%88%e4%ba%8b%e4%bb%b6/