设置控件不能点击(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

目录
相关文章
|
前端开发
CSS pointer-events 控制鼠标事件
CSS pointer-events 控制鼠标事件
46 0
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
layui嵌套弹出模态框的Blocked a frame with origin null from的解决方案
179 0
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
window.addEventListener注册滚动scroll事件不生效
window.addEventListener注册滚动scroll事件不生效
|
前端开发
CSS pointer-events 鼠标事件(让标签无法点击)
CSS pointer-events 鼠标事件(让标签无法点击)
141 0
electron setParentWindow绑定父窗口后,会出现center()不生效问题
在使用 Electron 的 `setParentWindow` 方法绑定父窗口后,有时会发现调用 center() 方法无效的情况。
166 0
|
Java Android开发 C++
Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
Framework 全局监听屏幕点击事件 INPUT_EVENT_INJECTION
309 0
|
JavaScript
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
【layui小技巧】layer使用layer.msg方法时如何让用户点击遮罩层就关闭消息框?layer.msg点击消失
849 0
SwiftUI—使用Toggle开关控件开启或取消某个选项
SwiftUI—使用Toggle开关控件开启或取消某个选项
476 0
SwiftUI—使用Toggle开关控件开启或取消某个选项
|
API C#
Window Form步骤条控件实现
本文将利用C#中的GDI+技术,自动绘制相关的UI元素,实现Window Form的步骤条控件。
713 0
Window Form步骤条控件实现