设置控件不能点击(pointer-events)

简介: 设置控件不能点击(pointer-events)

使用方法

  1. 定义CSS方法:.disabled { pointer-events: none; }
  2. js使用: $("#selectorId").addClass("disabled");

pointer - events 解析

概念性的解析:

CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时,SVG 内容表现如同 visiblePainted。除了指定元素不成为鼠标事件的目标,none 值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。

实际场景:

如下面的图片,文字上面包了一层黄色图层的div,如果我们想选中里面的文字,选不中,因为被黄色的图层拦截了事件了,如果黄色图层加一个事件pointer-events: none;,里面的文字就能选择了。

image.png

目录
相关文章
|
12月前
|
前端开发
CSS pointer-events 控制鼠标事件
CSS pointer-events 控制鼠标事件
42 0
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
161 0
|
2月前
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
65 0
|
前端开发
CSS pointer-events 鼠标事件(让标签无法点击)
CSS pointer-events 鼠标事件(让标签无法点击)
115 0
|
Java Android开发 C++
Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
281 0
|
JavaScript
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
792 0
关于 QGraphicsScene场景中触发事件使用event->pos()获取坐标为0 的解决方法
关于 QGraphicsScene场景中触发事件使用event->pos()获取坐标为0 的解决方法
关于 QGraphicsScene场景中触发事件使用event->pos()获取坐标为0 的解决方法
mode的设置和404页面的处理
mode的设置和404页面的处理
151 0
Button 使用Command 按钮置灰未更新
原文:Button 使用Command 按钮置灰未更新 当Button绑定了Command,按钮在窗口弹出、或者其它事件时,会自动置灰. 有时,异步执行时间较长时,界面一些绑定了命令的Button,State不会变化,会一直置灰。
1069 0
|
Windows
背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件
原文:背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Pointer 相关事件, Tap 相关事件, Key 相关事件, Focus 相关事件 [源码下载] 背水一战 Windows 10 (68) - 控件(控件基类): UIElement - Poin...
1199 0