pointer-events属性

根据MDN上的解释如下：

CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时，SVG内容表现如同visiblePainted。

除了指定元素不成为鼠标事件的目标，none值还指示鼠标事件穿过该元素，并指向位于元素下面的元素

语法：

属性：

auto

与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
none: 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
visiblePainted: 只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：

visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值

visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值
visibleFill: 只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。
visibleStroke: 只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。
visible: 只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。
painted: 只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：

鼠标指针在元素内部，且fill属性指定了none之外的值

鼠标指针在元素边界上，且stroke属性指定了none之外的值

visibility属性的值不影响事件处理。
fill: 只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理。
stroke: 只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理。
all: 只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理。

pointer-events如上述所言支持的值很多，但大多都与SVG相关，我们可以不用理会。而对于我们来讲，需要注意的就是[none|auto]两个属性值了。“auto”没什么好说的，就是在正常状态下的元素。本文将着重研究一下“none”。

pointer-events:none顾名思意，就是让任何鼠标元素对鼠标事件不起作用，这里的鼠标事件包括css中的hover，同时也会关闭js中的onclick。

pointer-events:none的作用不只是禁用链接hover，打开链接等效果，是真实意义上的将onlick事件去掉了。但是，他不会关闭键盘时间，比如点击"tab"键会切换<a>标签，设置了pointer-events:none的元素同样有反应。

转载于:https://www.cnblogs.com/bgwhite/p/9414309.html

pointer-events属性相关推荐

把鼠标、触摸屏、触控笔统一起来，Pointer Events介绍
跨设备的问题平时我们在电脑上访问的网页,大部分情况下是用鼠标来控制的.比如说链接跳转,就是鼠标指针移动到链接文字或图片的位置,然后点击一下.又比如说滚动屏幕,滑动一下鼠标滚轮就可以. 如果是供手机访 ...
CSS pointer-events属性的使用
楔子在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉.其中动画是最常用的方法. 这里的需求是,弹层的设计,这个弹层希望可以像 native 上的弹层 ...
html 透明层禁止点击事件,(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明
我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的. 但有时 ...
css指针悬停_CSS中的指针事件属性
css指针悬停 CSS | 指针事件属性 (CSS | pointer-events Property) Pointers are the mouse cursors on the web page ...
html dom style pointer-events,如何在CSS中使用pointer-events属性
如何在CSS中使用pointer-events属性发布时间:2021-03-26 17:02:35 来源:亿速云阅读:57 作者:Leah 今天就跟大家聊聊有关如何在CSS中使用pointer-e ...
TouchScript中文---Pointer Input
本博主要是看到github上有TouchScript的基本的文档,想要翻译成中文,加深一下理解,同时写一下自己的想法. 原文博客:https://github.com/TouchScript/Touc ...
smart pointer in gamedev
为什么80%的码农都做不了架构师?>>> 在游戏开发,确切的讲是engine开发中什么时候使用smart pointer? 现代游戏engine开发几个特点: 规模很大效率是 ...
CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究参考自:pink老师教案 CSS3属性选择器属性选择器列表: 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...
html5和c3属性,H5与C3不得不说的知识点
1 HTML 5 html5包含htm5 + css3 + javascript 1.1 新增语义标签头部导航栏块级内容侧边栏脚部注意:可以多次使用:ie9中需要转换为块级元素:针对搜索 ...
控件中的Events个人理解。
首先,了解一下与事件和委托有关的几个类和属性: Delegate, MulticastDelegate, EventHandler, EventHandlerList, EventHandlerLis ...

pointer-events属性

pointer-events属性相关推荐

最新文章

热门文章