Css pointer-events: none 属性说明：

最新推荐文章于 2023-05-25 16:06:39 发布
最新推荐文章于 2023-05-25 16:06:39 发布
阅读量593 收藏 1
点赞数
分类专栏： CSS 文章标签： 大数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65284931/article/details/125835267
版权

1、pointer-events: none  去除鼠标事件

     pointer-events: auto   恢复除鼠标事件 

用途，当我们想恢复定位下面按钮的点击事件时可以用到这个属性

用法： 给定位的盒子设置 pointer-events: none ;

给定位盒子有需要点击事件的子盒子设置  pointer-events: auto；

这样就能解决 部分场景下的问题，

如下图  购物车的固定定位盒子遮挡住下面的按钮，这种场景下就可以用到这个属性

注：Opera在SVG中支持该属性但是HTML中不支持

This luckly boy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css pointer-events属性实现下面元素可点击
12-09
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 将它应用到一个元素 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面
css不常见属性之pointer-events的使用方法
12-03
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events:
pointer-events（禁止鼠标事件）
SeriousLose
06-21 1051
pointer-events: none; 鼠标事件失效（链接、点击等事件） 常用场景： 验证码获取； 等禁止鼠标事件； 注意： pointer-events 的值为 none 时，如果元素上绝对定位，那在它下一层的元素可以被选中。 pointer-events:...
el-select 结合 el-checkBox 实现下拉全选+多选功能
keke11211的博客
11-23 2469
实现效果如图所示： 具体代码如下： <!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能 --> <template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="
CSS pointer-events: none 去掉鼠标事件
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
CSS3 pointer-events:none应用举例及扩展
weixin_33816821的博客
12-14 566
一、pointer-events:none是？ pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用 理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto” 类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的...
pointer-events:none&pointer-events: auto
weixin_57071684的博客
05-25 1422
当 pointer-events 设置为 none 时,当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。换句话说,pointer-events: none 可以让一个元素无法响应用户输入事件,而保持原有的其他行为(如影响布局)。实现视差滚动效果。通过 pointer-events: none 使滚动层无法响应交互,实现粘性效果。实现遮罩层。pointer-events: none 可以使下层元素无法响应事件,产生遮蔽遮罩的效果。修复点击穿透问题。
point-events:none
qq_38105960的博客
09-20 2973
pointer-events: none; //如同disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，这个链接，你是点不了的，并且 hover 也没有效果。 （值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了） 案例： <!DOCTYPE html...
认识 CSS pointer-events 属性
老司机的后备箱
02-13 1万+
条目状态初始值auto可用值适用所有元素：auto/none，只适用于 SVG：bounding-box/visiblePainted/visibleFill/visibleStroke/visible/painted/fill/stroke/all可继承是的动画类型离散动画（关键帧之间不会有插帧，不会有过渡动画）我们来结合例子说明。是一个可继承属性，按照 CSS 的层叠与继承规则，子元素未设置时将会继承父值。如下例，self 元素设置，child 元素继承到也为none。
使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
09-24
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
CSS的pointer-events属性详细介绍（作用和注意事项）
12-13
而本文要说的pointer-...这个pointer-events属性有很多可以使用的属性值，但大部分都是针对SVG的：auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 in
pointer-events:none应用场景
a279534269的博客
10-30 582
创建一个产品的时候来联系点击会报主键冲图。解决方法用pointer-events:none，可以防止连续点击 简介 pointer-events: none 真是个神奇的属性。 该属性有什么用？借用 CSS3 pointer-events:none 应用举例及扩展 的总结来说： pointer-events: none 顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了“浮云牌酱油”。pointer-events: none 的作用是让元素实体 “虚化”。例如一个
CSS pointer-events 用法和属性，意思
Java&Develop的博客
06-12 367
pointer-events: none; none 元素不能对鼠标事件做出反应 也就是，鼠标点击链接不能 跳转到指定路径div.ex2 { pointer-events: auto; } auto 默认值，设置该属性链接可以正常点击访问。 也就是，鼠标点击链接可以 跳转到指定路径......
css 点击穿透 pointer-events: none；一般用于遮罩
weixin_42729938的博客
04-01 7352
通常我们用遮罩后会覆盖到一些需要点击的事件例如： <div class="demo" click="aaa">111</div> <div class="mask"></div> <style> .mask{ width:100%; height:100vh; background-color:rgba(0,0,0,.5); p
CSS3神奇的样式 pointer-events: none;解决JS鼠标事件穿透到子标签
九天翔龙的技术博客
04-11 1万+
最近做一个案例演示的时候，遇到个小问题。要获取鼠标相对标签（为了方便称呼，我们叫它parent标签）的坐标，当然要用到event.offsetX和event.offsetY。 不过，如果鼠标移动到（也可以是点击）parent的子标签（称呼它child）后，就尴尬了，event.offsetX 和 event.offsetY 就不再是相对 parent 的坐标了，而是相对 child的坐标。 举...
浅谈css3属性pointer-events: none和will-change和user-select
weixin_44999830的博客
06-12 1754
1、pointer-events: none pointer-events: none； 可以让某个元素实现类似于海市蜃楼的效果，具体理解为，你可以看的到某个元素，但是你无法摸的着。 而display：none; 是你摸不着，但是你也看不见。 pointer-events: none；摸不着，但是看得见。如果把某个元素再加上opacity：0；则可以很容易实现类似display:none；的效果（...
如何禁用 a 标签的点击事件 disabled属性 和 pointer-events属性值详解
热门推荐
weixin_41883384的博客
05-02 5万+
首先 ，大家要知道： a标签 是没有disable 属性的 ， 如果想用disable 禁止a标签的点击事件，也是可以实现的；往下看1. a标签 要用  disable 属性，必须和  pointer-events属性一起使用  ，例子 如下：     HTML 部分代码：     &lt;a class="praise"&gt;赞&lt;/a&gt;       JS 代码：        $(...
pointer-events: none；属性；看得见摸不着，点击穿透
qq_43610925的博客
08-08 547
pointer-events: none；属性；看得见摸不着，点击穿透
iframe 事件不起作用
weixin_45932157的博客
08-12 1540
在父页面中绑定了mousemove，但是鼠标经过iframe的时候却没有触发事件，只要加上一点css就好了。
pointer-events:none;
最新发布
11-22
下面是一个示例代码，其中一个元素的pointer-events属性被设置为none，另一个元素的pointer-events属性被设置为auto，可以看到只有后者可以响应鼠标事件和触摸事件： ```html <div class="click-through"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值