pointer-events:none顾名思意,就是让任何鼠标元素对鼠标事件不起作用,这里的鼠标事件包括css中的hover,同时也会关闭js中的onclick。 三、效果 pointer-events:none的作用不只是禁用链接hover,打开链接等效果,是真实意义上的将onlick事件去掉了。但是,他不会关闭键盘时间,比如点击"tab"键会切换标签,设置了pointer-eve...
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
pointer-events: none; } 此时该div的样子,如果不设置pointer-events: none; 只是样子不可点击,点击还是会触发事件响应的。 加上则不会响应click事件了。
除了常用的pointer-events: none之外,还有很多其他参数。关于 pointer-events 详细介绍可以参考MDN上的内容。工作当中有很多应用场景,比如一些可以点击的商品图片,如果设计师在图片上设计了遮罩层,那使用 pointer-events 的属性无疑会很简单。
首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时,SVG 内容表现如同 visiblePainted。除了指定元素不成为鼠标事件的目标,none 值还指示鼠标事件穿过该元素,并指...
首先看一下MDN上关于 pointer-events 的介绍: CSS属性pointer-events允许作者控制特定的图形元素在何时成为鼠标事件的target。当未指定该属性时,SVG 内容表现如同visiblePainted。 除了指定元素不成为鼠标事件的目标,none值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。
在这个示例中,.overlay类创建了一个覆盖整个页面的半透明遮罩层,但由于设置了pointer-events: none,它不会阻止用户与下层.content元素的交互。 5. 额外的资源或参考链接 MDN Web Docs: pointer-events CSS Tricks: pointer-events: none 这些资源提供了关于pointer-events属性的详细信息和使用示例,有助于深入理解并...
“The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.”— Mozilla MDN “If you add a click event listener to an element, then remove the point...
pointer-events: unset;其中默认属性为 auto。当值为none表⽰⿏标事件“穿透”该元素并且指定该元素“下⾯”的任何东西。使⽤场景 抛却只适⽤于svg的值,说⼀说 none 的使⽤场景。 mdn上的解释不太好理解。⽹友叙帝利给出了⼀种使⽤场景。我这⾥还有⼀中使⽤场景是当⽤div元素通过css...
将MDN的解释形象化,你可以把设置 pointer-events: none 看成一张透明纸,它本身不再响应鼠标事件(事实上,也包括移动的手指触摸Touch事件),却可以传递事件,让事件穿过它自己,继续传到父级。 简而言之,我们想让哪层不滚动,只需要给这层设置 pointer-events: none 。