pointer-events: none 属性让鼠标无法选中元素

最新推荐文章于 2024-08-27 10:07:51 发布
最新推荐文章于 2024-08-27 10:07:51 发布
阅读量369 收藏
点赞数
分类专栏： 前端备忘 文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013836242/article/details/120510839
版权

如题, 在元素上设置此属性 pointer-events 可让鼠标穿透元素, 无法对元素做操作

何日成熟
关注
专栏目录
pointer-events: none。 "影子属性"。 解决遮罩层下面图片或文字超链接无法选中执行功能
liu__xi__的博客
04-17 459
pointer-events: none 今天又发现了一个神奇的“影子”属性：pointer-events: none 为什么理解为影子属性呢？ 因为pointer-events: none 的作用是让元素实体 “虚化，简单的理解为一个影子，高大上一点就是海市蜃楼，看得见却摸不着。 今日份踩坑： 给盒子写遮盖层时，下方的图片超链接被遮盖层挡住了，功能无法实现，想通过遮盖层点击实现跳转功能： bod...
CSS pointer-events: none 去掉鼠标事件
热门推荐
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
鼠标穿透 pointer-events: none；
2401_83232643的博客
05-30 1565
是 CSS3 中的一个属性，主要用于控制元素是否响应鼠标或触摸事件。当元素的 pointer-events 属性被设置为 none 时，该元素及其子元素将无法与鼠标或触摸设备产生交互作用，即无法触发事件。可以在一个元素上设置 pointer-events: none，然后在它的子元素上绑定事件，这样鼠标交互会直接在子元素上触发事件，跳过中间元素。在一个元素的子元素上设置 pointer-events: none，可以防止点击事件穿透到父层元素上。在一个元素上覆盖一个透明的层，同时禁用用户对下面元素的操作。
解决pointer-events:none无效问题
最新发布
小灰灰的博客
08-27 1048
我们在开发过程中有时候会做一个弹出层或者弹出窗口，这个时候就会有一个遮罩层，而这个遮罩层的作用不只是为了凸显弹出框，还有一个作用就是隔绝遮罩层下的操作。比如：左边半透明的就是遮罩层，右边就是弹出层（因为这是我正式的系统，不好全部截图，大家见谅）在弹出这个弹出层之后，正常情况是不能操作遮罩层遮住的那一部分下面的按钮的，我在网上找了很多解决方法，都是说在遮罩层上加样式：pointer-events:none，但是没用，这个样式无效，后面我想到是不是被这个遮罩层的父级元素影响了，结果证明确实如此。
pointer-events:none应用场景
a279534269的博客
10-30 622
创建一个产品的时候来联系点击会报主键冲图。解决方法用pointer-events:none，可以防止连续点击 简介 pointer-events: none 真是个神奇的属性。 该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说： pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了“浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个
pointer-events: none导致点击事件失效解决方法
年三十的博客
12-03 8903
前言 在页面中我们可能会使用图片作为按钮去处理 但在微信中打开页面，长按会触发微信的图片保存机制 这时候我们就用到了pointer-events:none;这个CSS属性 显然它能解决禁止长按保存的问题 但也引发了事件不生效，一起禁止了 使用两个方式解决： 在相同位置写个DOM元素去占位，替代图片，触发此DOM的事件 将图片设置为背景图片去处理 即可解决！ ...
css pointer-events属性实现下面元素可点击
12-09
然而，通过设置`pointer-events`属性为`none`，可以使得上方的元素变得透明于鼠标交互，让鼠标事件能够穿透到下方的元素。 `pointer-events`属性主要有以下几个值： 1. `auto`：默认值，元素会响应鼠标事件。 2. `...
css3 pointer-events 介绍详解
09-24
- 在制作网页时，可能不希望某些元素（如弹窗遮罩层）接收到点击事件，这时候可以设置pointer-events: none，使得即使鼠标在这些元素上移动也不会触发事件。 - 在提交按钮的场景中，当进行异步请求时，为了防止用户...
React 工作踩坑总结1
CD2N_Queen的博客
11-16 607
react 工作踩坑总结
canvas 穿透效果，canvas做网页背景无法选取后面的元素问题
Chad97的博客
01-18 2886
canvas 穿透效果，canvas做网页背景无法选取后面的元素问题 遇到这个问题这里记录一下，解决方案也非常简单 在我们把 canvas 作为 网站的 body 背景的 时候，如果z-index 的层级没注意设计，默认情况下，canvas 会遮挡网站上的 a 链接 和一些按钮的 遇到这个 问题 我们只需要在 canvas 背景中添加一个css 属性：pointer-events: none...
【未解决】pointer-events:none无效 （CSS3）
Venchi的博客
04-30 3217
想实现一个li不可点击，使用pointer-events:none并没有效果，还是会冒泡到事件代理中。
pointer-events 鼠标禁止复制文字
czy279470138的博客
01-14 742
pointer-events 当把值设置为none后，他有如下相关特性 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的hover和active状态的变化触发事件 阻止JavaScript点击动作触发的事件 兼容性 IE 　11+ Firefox 　3.6＋ Chrome　4.0+ Safari　　6.0 Opera　 15.0 iOS Safari 6.0 A...
鼠标禁用样式(cursor: not-allowed)无效和鼠标禁用事件(pointer-events: none)冲突
小多的博客
07-07 7884
鼠标禁用样式： 鼠标禁用事件： 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向其后代元素。如果同时使用 ，鼠标为默认样式； 解决方法：外层添加盒子将样式分开 外部盒子使用cursor: not-allowed;（cursor：no-drop） 内部盒子使用pointer-events: none; 不使用鼠标禁用事件，而是在鼠标点击事件中做判断...
element plus 中 Drawer 抽屉开启后不能点击外部元素问题
jiangjunyuan168的博客
12-11 2813
在开发 vue3 项目的过程中，使用 Element Plus 的 Drawer 抽屉时抽屉弹出后点击外部元素没有反应。
禁止图片拖拽和文字被选中
weixin_30776545的博客
03-28 255
禁止图片拖拽 method1 img{pointer-events:none} ，firefox支持，IE不支持 method2 <body ondragstart='return false'></body> || img{ondragstart='return false'} method3 <body onselectstart='return f...
鼠标移入或悬浮禁用图标，点击事件不生效
woshishui099的博客
11-28 1903
<div style="cursor: not-allowed;cursor: no-drop;"> <div @click="getData()" style="pointer-events: none;"> </div> </div> 鼠标悬停禁用图标css cursor: not-allowed; cursor: no-drop; 点击事件不生效css pointer-events: none; 注释：如果把两个样式放到同一级，会期冲突，
CSS3 pointer-events:none应用举例及扩展
weixin_33816821的博客
12-14 606
一、pointer-events:none是？ pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用 理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto” 类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的...
el-select 结合 el-checkBox 实现下拉全选+多选功能
keke11211的博客
11-23 2571
实现效果如图所示： 具体代码如下： <!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能 --> <template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="
vue3实现鼠标移入表格el-table某一行鼠标出现禁用符号
05-12
可以通过 `row-class-name` 属性来为表格的每一行添加自定义的 CSS 类名。然后在 CSS 中为添加了这个类名的行添加禁用符号的样式。代码示例： ```html <template> <el-table :data="tableData" row-class-name="disable-row"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <style> .disable-row { cursor: not-allowed; } .disable-row:hover { background-color: #f9f9f9; } .disable-row td { pointer-events: none; } </style> ``` 在上面的示例中，为 el-table 组件添加了一个 `row-class-name` 属性，并将其设置为 `disable-row`。然后在 CSS 中为添加了这个类名的行添加了禁用符号的样式。其中： - `cursor: not-allowed` 表示鼠标移动到该行时显示禁用符号的鼠标样式； - `background-color: #f9f9f9` 表示鼠标移动到该行时该行的背景色变为浅灰色； - `pointer-events: none` 表示该行中的所有元素都不响应鼠标事件。 这样，当鼠标移动到表格中的某一行时，该行就会显示禁用符号，并且不能再次被选中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值