pointer-events: none 去掉鼠标事件

最新推荐文章于 2023-11-28 17:57:36 发布
最新推荐文章于 2023-11-28 17:57:36 发布
阅读量215 收藏
点赞数
分类专栏： css 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hdy119yaner/article/details/127247834
版权

今天看到一个博客非常漂亮，有花瓣飘落下来的前景图，我想这肯定是canvas插件做的，查看元素果不其然。但是当我复制博客里面所需要的内容时，发现前景的canvas图并未挡住底部，底部内容可复制，鼠标触碰前景的时候可以轻易地没有任何感觉地从中穿过去。我很好奇这是怎么做到的，后来查看到css里面有一个设置pointer-events: none，于是去查了查，原来就是这个起的效果，特此记录下。

pointer-events: none 去掉鼠标事件
pointer-events: auto 恢复鼠标事件

皇菇凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS pointer-events: none 去掉鼠标事件
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
css中取消鼠标事件pointer-events:none应用场景
m0_51636525的博客
04-24 1137
鼠标放置在红圈位置，不能触发hover小手 上方的图片和按钮有一定的宽度，所以需要给上方的图片和按钮取消鼠标事件 上层的按钮也是有hover事件的，所以把整个先取消掉鼠标事件，pointer-events:none;再给那些需要hover事件的按钮添加pointer-events:auto; .right-nav { pointer-events: none; position...
css之pointer-events 移除鼠标事件
wangzhichaogege的博客
09-02 728
属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的target pointer-events: auto; pointer-events: none; // 直接移除鼠标事件 pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ po.
Canvas元素不接收鼠标事件处理办法
最新发布
weixin_46221897的博客
11-28 745
遇到的问题是:拖拽调整宽度的过程中右侧内容为canvas鼠标移入便不执行mousedown事件，导致拖拽过程中断断续续,影响用户体验。解决办法：通过事件动态为canvas元素设置 pointer-events 属性。
前端coursor设置为pointer在移动端点击会出现蓝色背景解决
qq_45376215的博客
07-29 1213
1，删除该属性coursor:pointer，因为在移动端该效果无效,反而点击背景会变蓝色 2，去除该效果添加如下属性 -webkit-tap-highlight-color: transparent;
UGUI canvas之间触控屏蔽解决方案（解决短时间内多次点击问题）
porken的博客
08-10 3766
项目中制作UI经常遇到的需求是：点击触控区域播放一段动画或者执行一些读取加载操作，如果动画未播放完或者读取操作正在进行，我们一般不希望按钮短时间内不再响应触控。
使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
09-24
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
gatsby-plugin-pointer-events:一个Gatsby插件，用于添加Pointer Events Polyfill（PEP）
04-29
gatsby-plugin-pointer-events 一个Gatsby插件，用于添加安装纱yarn add gatsby-plugin-pointer-events NPM npm install gatsby-plugin-pointer-events 如何使用将插件添加到您的gatsby-config.js 。 // gatsby-...
CSS的pointer-events属性详细介绍（作用和注意事项）
09-25
即使父元素设置了`pointer-events: none`，子元素仍然可以通过声明自己的`pointer-events`为`auto`来恢复鼠标事件的响应。这为复杂的交互设计提供了灵活性。 ### 4. 与JavaScript事件监听器的关系 `pointer-events...
css不常见属性之pointer-events的使用方法
12-03
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: ...
css pointer-events属性实现下面元素可点击
09-25
通过JavaScript监听`checkbox`的`onclick`事件，动态地添加或移除`pointer-events-none`类，从而切换`overlay`元素对鼠标事件的响应。 浏览器支持方面，Firefox 3.6+、Safari 4和Google Chrome已经支持`pointer-...
Canvas鼠标事件-4
编程是一门实践技术
05-15 744
【代码】Canvas鼠标事件-4。
pointer-events:none&pointer-events: auto
weixin_57071684的博客
05-25 1759
当 pointer-events 设置为 none 时,当前元素及其子元素将无法与鼠标或触摸设备产生交互作用。鼠标点击、滑过、甚至移动都不会触发事件。换句话说,pointer-events: none 可以让一个元素无法响应用户输入事件,而保持原有的其他行为(如影响布局)。实现视差滚动效果。通过 pointer-events: none 使滚动层无法响应交互,实现粘性效果。实现遮罩层。pointer-events: none 可以使下层元素无法响应事件,产生遮蔽遮罩的效果。修复点击穿透问题。
pointer-events: none；属性；看得见摸不着，点击穿透
qq_43610925的博客
08-08 589
pointer-events: none；属性；看得见摸不着，点击穿透
canvas响应鼠标事件
hb707934728的博客
03-29 1万+
Sprite sheets body { background: #dddddd; } #canvas { position: absolute; left: 0px; top: 20px; margin:
如何禁用 a 标签的点击事件 disabled属性 和 pointer-events属性值详解
热门推荐
weixin_41883384的博客
05-02 5万+
首先 ，大家要知道： a标签 是没有disable 属性的 ， 如果想用disable 禁止a标签的点击事件，也是可以实现的；往下看1. a标签 要用  disable 属性，必须和  pointer-events属性一起使用  ，例子 如下：     HTML 部分代码：     <a class="praise">赞</a>       JS 代码：        $(...
uGUI两个Canvas其中一个不响应鼠标事件
不知道干嘛的
03-03 7765
建立了两个Canvas,其中一个不响应鼠标事件。 原因是要设置Priority优先级，将上面的Canvas优先级设为3，下面的设为2，则两个canvas都可响应鼠标事件了。 4.6.0中Priority优先级设置在Canvas上 4.6.2中Priority选项被删除去了。- -！自己去找找咯。
pointer-events:none;
11-22
pointer-events:none;是CSS属性，用于设置元素是否响应鼠标事件和触摸事件。当一个元素的pointer-events属性被设置为none时，该元素及其子元素将无法与鼠标或触摸设备产生交互作用，即无法触发事件。这个属性常用于以下场景： - 实现视差滚动效果 - 实现遮罩层 - 修复点击穿透问题 - 改变鼠标事件的触发对象 下面是一个示例代码，其中一个元素的pointer-events属性被设置为none，另一个元素的pointer-events属性被设置为auto，可以看到只有后者可以响应鼠标事件和触摸事件： ```html <div class="click-through"> <button class="clickable-child">Click me</button> </div> <style> .click-through { pointer-events: none; } .clickable-child { pointer-events: auto; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值