小心pointer-events: none；

最新推荐文章于 2024-08-27 10:07:51 发布
最新推荐文章于 2024-08-27 10:07:51 发布
阅读量302 收藏
点赞数
分类专栏： CSS vue javaScript 文章标签： css 事件 pointer vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_19473529/article/details/128529414
版权

  • 我发现点击事件不生效。
    在这里插入图片描述
    一开始我以为是swiper的问题，后面发现是css属性pointer-events: none;阻止了。
    在这里插入图片描述

  • 去掉后就可以点击了。
    在这里插入图片描述

css中取消鼠标事件pointer-events:none应用场景
m0_51636525的博客
04-24 1326
鼠标放置在红圈位置，不能触发hover小手 上方的图片和按钮有一定的宽度，所以需要给上方的图片和按钮取消鼠标事件 上层的按钮也是有hover事件的，所以把整个先取消掉鼠标事件，pointer-events:none;再给那些需要hover事件的按钮添加pointer-events:auto; .right-nav { pointer-events: none; position...
CSS的pointer-events属性详细介绍（作用和注意事项）
09-25
即使父元素设置了`pointer-events: none`，子元素仍然可以通过声明自己的`pointer-events`为`auto`来恢复鼠标事件的响应。这为复杂的交互设计提供了灵活性。 ### 4. 与JavaScript事件监听器的关系 `pointer-events...
point-events:none
qq_38105960的博客
09-20 3117
pointer-events: none; //如同disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，这个链接，你是点不了的，并且 hover 也没有效果。 （值得一提的是，仅仅是鼠标事件失效，用 tab 键还是可以选中该链接的然后 enter 打开，这个时候可以去掉 a 标签的 href 属性，就不能让 tab 键选中了） 案例： <!DOCTYPE html...
pointer-events: none导致点击事件失效解决方法
年三十的博客
12-03 9064
前言 在页面中我们可能会使用图片作为按钮去处理 但在微信中打开页面，长按会触发微信的图片保存机制 这时候我们就用到了pointer-events:none;这个CSS属性 显然它能解决禁止长按保存的问题 但也引发了事件不生效，一起禁止了 使用两个方式解决： 在相同位置写个DOM元素去占位，替代图片，触发此DOM的事件 将图片设置为背景图片去处理 即可解决！ ...
设置控件不能点击（pointer-events）
阿甘兄
04-25 1834
使用方法 定义CSS方法：.disabled { pointer-events: none; } js使用： $("#selectorId").addClass("disabled"); pointer - events 解析 概念性的解析： CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 target。当未指定该属性时，SVG 内容表现如同 vis...
pointer-events: none；
cecoal的博客
04-09 277
Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。input标签可以用disabled属性禁用鼠标事件，但是其他标签禁用可以设置这个css。pointer-events: none去掉鼠标事件。pointer-events: auto恢复鼠标事件。只显示样式不会触发鼠标事件。看的见摸不着，点击穿透。
微信小程序填坑篇 2
liusaint1992的专栏
09-13 1717
微信小程序开发的时候，很多接口都不太能信任，需要作一些额外的兜底处理。保证程序在什么情况下都能尽可能健康的运行。 也要有一套健全的异常收集反馈机制，方便迅速发现问题解决问题。 小程序生态的异常监控体系，主要包含小程序后台的代码运行报错，小程序告警群的使用，具体用户的信息收集上报，代码逻辑中可能的预警上报统计，微信新版本的内测跟进等方面。 1.css支持。 在ios12上 css3的支持不够好。有时候动画animation的forward无效。现象是动画结束后突然回到初始状态。 极少数ios机型会出现a
使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
09-24
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
Tooltip 提示 设置 pointer-events: none
最新发布
03-27
如果确实需要某些时刻开启/关闭特定区域内的互动能力，则可以在 JavaScript 中根据条件实时更改相关 HTML 元素上的 `style.pointerEvents` 值，在不需要时设回 `"none"` 即可恢复原状。 ```javascript function ...
css不常见属性之pointer-events的使用方法
12-03
MDN 上介绍为 CSS 属性指定...pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events:
css3属性 pointer-events: none 在小程序中不生效
Misnice的博客
11-06 1861
微信小程序中默认原生canvas组件层级最高，所以不生效
CSS3 pointer-events属性（控制鼠标点击事件）
WU567_的博客
03-21 1149
pointer-events：（鼠标点击事件失效） • 阻止用户的点击动作产生任何效果 • 阻止CSS里的 hover 和 active 状态的变化触发事件 • 阻止JavaScript点击动作触发的事件 • 提交页面，提交按钮点击后，添加这个样式属性（style=“pointer-events”），来防止重复提交。 • 一些层的绝对定位，覆盖按钮，穿透可以点击它。 pointer-events...
cursor css属性 显示光标问题
weixin_44845483的博客
06-02 995
有时我们组件中没有设置disabled属性时，可能会需要使用cursor:not-allowed来设置禁用光标标志，同时要使用 pointer-events:none来禁用鼠标点击事件。 此时可能会遇到一些问题，即 此时的pointer-events:none 将cursor:not-allowed也禁用了，即此时cursor:not-allowed是不起作用的，有两种解决方案，一种是通过在设置cursor处的父元素处设置pointer-events:none 此方法在以下链接处看到点击此处查看此方法 此
解决pointer-events:none无效问题
小灰灰的博客
08-27 1542
我们在开发过程中有时候会做一个弹出层或者弹出窗口，这个时候就会有一个遮罩层，而这个遮罩层的作用不只是为了凸显弹出框，还有一个作用就是隔绝遮罩层下的操作。比如：左边半透明的就是遮罩层，右边就是弹出层（因为这是我正式的系统，不好全部截图，大家见谅）在弹出这个弹出层之后，正常情况是不能操作遮罩层遮住的那一部分下面的按钮的，我在网上找了很多解决方法，都是说在遮罩层上加样式：pointer-events:none，但是没用，这个样式无效，后面我想到是不是被这个遮罩层的父级元素影响了，结果证明确实如此。
关于html添加了pointer-event属性再添加cursor未生效的问题
m0_62701558的博客
03-08 946
a标签设置禁止跳转
pointer-events: none；造成鼠标悬浮没有title
代码的星辰大海
08-01 805
pointer-events: none;导致鼠标悬浮title失效
遮罩层，绝对定位元素导致无法触发点击事件的解决办法
爱笑的tycho_的博客
10-24 7024
问题 在没有背景和图片填充的情况下，Firefox 和Chrome 下不能直接点击绝对定位层下的元素（比如连接，按钮），下面的元素会被上面的绝对定位层挡住。IE下可以直接点击绝对定位层下面的元素。 解决办法 对于这种问题需要用到一个CSS3的属性，可以通过给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了。 这其中有一个需要注意的地方...
关于使用css属性pointer-events: none；禁用一切点击事件与 pointer：default的问题
weixin_42794873的博客
02-04 1280
项目中遇到了需要让自定义的按钮元素禁用并置灰，同时又想让置灰按钮的pointer：default，发现即使加了 !important ，pointer：default也不生效，这是由于pointer-events: none;禁用一切点击事件，导致鼠标pointer不生效，若一定要修改pointer，就不能用pointer-events: none;来禁用点击事件了。 ...
pointer-events:none解决重叠元素不能感应鼠标事件的问题
web开发
07-03 944
Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值