CSS pointer-events 鼠标事件（让标签无法点击）

最新推荐文章于 2025-08-13 11:08:42 发布
原创 最新推荐文章于 2025-08-13 11:08:42 发布 · 1.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #html
本文介绍了CSS3中pointer-events属性的基本用法及其值none的效果。通过设置此属性可以阻止鼠标事件（如点击、链接跳转）在指定元素上触发，并且能够改变鼠标样式。

  • pointer-events 文档

  • pointer-events 是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关。对于前端日常开发，只要了解 none 这个值就够了。

  • pointer-events: none; 意思就是让鼠标事件失效（链接、点击等事件）。指定标签例如 button a 之类的标签添加该属性之后，再按就没效果了，同时鼠标在按钮上也不会变成“一只手”了。

  • 除次之外，它还可以禁止标签的页面跳转。

CSS设置元素不可点击
PixelCoder的博客
09-30 5759
在这个函数中，我们使用了event.preventDefault()和event.stopPropagation()来阻止按钮的点击事件继续传播和执行，从而实现禁用点击的效果。通过设置pointer-events属性、使用JavaScript禁用点击事件或者使用透明覆盖层，我们可以有效地禁用元素的点击功能，实现更灵活的网页交互效果。在上述示例中，我们定义了一个名为"disable-click"的CSS类，将其应用于需要禁用点击的元素上。另一种常见的方法是使用一个透明的覆盖层来阻止元素的点击。
认识 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: none
kaisersama__的博客
11-15 3367
pointer-events 属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。pointer-events的常见值auto：元素可以正常接收鼠标事件（默认值）。none：元素不会响应任何鼠标事件或触摸事件，所有指针事件都会被忽略。等：这些值更多是 SVG 场景中的特定用法。：这些值适用于 SVG 元素，用来控制元素的填充区域和描边区域是否响应指针事件。
pointer-events: none导致点击事件失效解决方法
年三十的博客
12-03 9313
前言 在页面中我们可能会使用图片作为按钮去处理 但在微信中打开页面，长按会触发微信的图片保存机制 这时候我们就用到了pointer-events:none;这个CSS属性 显然它能解决禁止长按保存的问题 但也引发了事件不生效，一起禁止了 使用两个方式解决： 在相同位置写个DOM元素去占位，替代图片，触发此DOM的事件 将图片设置为背景图片去处理 即可解决！ ...
CSS pointer-events: none 去掉鼠标事件
快乐de馒头
01-21 1万+
pointer-events: none顾名思义，就是鼠标事件拜拜的意思。元素应用了该 CSS 属性，链接啊，点击啊什么的都变成了 “浮云牌酱油”。pointer-events: none的作用是让元素实体 “虚化”。例如一个应用 pointer-events: none 的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候...
css让元素不可点击 pointer-events: none;
weixin_34060299的博客
05-15 2247
张鑫旭大神：http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/ 我们知道form元素里的disabled 禁用元素 但是我们想让一个div或者p标签也不可以点击就用css里的pointer-events: none; 翻译过来就是指定事件：禁止 转载于:https://www.cn...
CSS3神奇的样式 pointer-events: none;解决JS鼠标事件穿透到子标签
九天翔龙的技术博客
04-11 1万+
最近做一个案例演示的时候，遇到个小问题。要获取鼠标相对标签（为了方便称呼，我们叫它parent标签）的坐标，当然要用到event.offsetX和event.offsetY。 不过，如果鼠标移动到（也可以是点击）parent的子标签（称呼它child）后，就尴尬了，event.offsetX 和 event.offsetY 就不再是相对 parent 的坐标了，而是相对 child的坐标。 举...
css控制鼠标点击事件（pointer-events）
langyixuan的博客
06-08 4047
pointer-events 是CSS3的一个属性，支持的值非常多，其中大部分都是和SVG有关。对于前端日常开发而言，只要了解 none 这个值就已经够我们玩一段时间了。 pointer-events: none; 意思就是让鼠标事件失效（链接、点击等事件）。 常用场合：获取验证码 给 a 标签定义一个 id=”btn”，然后通过 JS 控制 a 标签，点击之后模拟发送验证码，并让 a 标签添加一个定义好的 disable 样式。 最后设置2秒内不能再点击发送二维码请求。 可以看到上图效果。 第一次点击“
深入理解 CSS pointer-events: none：穿透点击的魔法
前端互助会
02-24 1752
是处理复杂交互层的利器，合理使用可实现：✅ 非阻塞式覆盖层✅ 自定义光标/装饰元素✅ 性能优化但需注意避免滥用，确保关键功能仍可通过其他方式访问（如键盘导航）！
猴赛雷的pointer-events，一个你可以用不到但是不能不知道的 CSS属性
su98777的博客
12-09 1451
当时的我在工作生涯中其实并没遇到过这种问题，也没有想到为什么会有这种情况的出现，也只是凭着自己的工作经验想出一个可以通过父子元素冒泡的做法实现这个做法，面试官虽说这个方法确实可以实现这个需求，我向他询问应该如何实现这个功能的时候，才首次认识了我们在这篇文章中要了解的pointer-events属性。
HTML/CSS 遮罩层登录框
木木木森林
12-29 553
HTML/CSS 遮罩层登录框 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
鼠标禁用样式(cursor: not-allowed)无效和鼠标禁用事件(pointer-events: none)冲突
小多的博客
07-07 9135
鼠标禁用样式： 鼠标禁用事件： 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向其后代元素。如果同时使用 ，鼠标为默认样式； 解决方法：外层添加盒子将样式分开 外部盒子使用cursor: not-allowed;（cursor：no-drop） 内部盒子使用pointer-events: none; 不使用鼠标禁用事件，而是在鼠标点击事件中做判断...
CSS3 pointer-events属性（控制鼠标点击事件）
WU567_的博客
03-21 1250
pointer-events：（鼠标点击事件失效） • 阻止用户的点击动作产生任何效果 • 阻止CSS里的 hover 和 active 状态的变化触发事件 • 阻止JavaScript点击动作触发的事件 • 提交页面，提交按钮点击后，添加这个样式属性（style=“pointer-events”），来防止重复提交。 • 一些层的绝对定位，覆盖按钮，穿透可以点击它。 pointer-events...
pointer-events: none；——让你的元素“隐身“点击事件
最新发布
菜鸡的博客
08-13 671
* 关键！避免干扰实际点击 *//* 通过JS跟随鼠标移动 */});就像给元素施加了"事件隐身术"，在复杂交互场景中尤为实用。合理使用这个特性，可以创造出更流畅、更精细的用户体验。但切记：能力越大责任越大，不要滥用哦！
解决pointer-events:none无效问题
小灰灰的博客
08-27 1977
我们在开发过程中有时候会做一个弹出层或者弹出窗口，这个时候就会有一个遮罩层，而这个遮罩层的作用不只是为了凸显弹出框，还有一个作用就是隔绝遮罩层下的操作。比如：左边半透明的就是遮罩层，右边就是弹出层（因为这是我正式的系统，不好全部截图，大家见谅）在弹出这个弹出层之后，正常情况是不能操作遮罩层遮住的那一部分下面的按钮的，我在网上找了很多解决方法，都是说在遮罩层上加样式：pointer-events:none，但是没用，这个样式无效，后面我想到是不是被这个遮罩层的父级元素影响了，结果证明确实如此。
pointer-events:none解决重叠元素不能感应鼠标事件的问题
web开发
07-03 987
Pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。 如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素...
WebAPI之指针事件
Zhang_YingJie的博客
03-20 668
以前web端的指针设备为鼠标，现在新兴设备越来越多，触摸屏、手写笔等。再使用鼠标事件已经不满足这些设备事件模型。指针事件-Pointer Events 是一类可以为指针设备所触发的DOM事件。它是一个统一的DOM事件模型。这些事件需要处理通用指针输入。指针-指一个可以明确指向屏幕上某一组坐标的硬件设备。接口继承了MouseEvent中的所有属性和方法。
CSS-事件 -单击双击、失去or获得焦点、加载事件、鼠标事件、键盘事件、选择与改变、表单事件
KiCCZha的博客
12-24 1330
5.3 onkeypress 某个键盘按键被按下并松开。4.4 onmouseover 鼠标被移动到某个元素上。4.1 onmousedown 鼠标按钮被按下。5.1 onkeydown 某个键盘按键被按下。4.2 onmouseup 鼠标按钮被松开。5.2 onkeyup 某个键盘按键被松开。6.1 onchange 域的内容被改变。7.1 onsubmit 确认按钮被点击。1.2 ondblclick:双击事件。7.2 onreset 重置按钮被点击。1.1 onclick:单击事件。
css 固定定位position:fixed 拦截了点击事件，导致后面组件无法使用@click的解决办法
ScottePerk的博客
04-10 1595
我写了一个没有数据的通用界面，当网络请求没有数据的时候显示。主要代码如下，其实就是固定定位居中。这个存在很严重的问题，就是后面的控制的点击事件全部被拦截了。找了半天也没找到解决方案。最后发现只要设置下面这个属性就可以了。设置z-index是没有效果的。
鼠标移入或悬浮禁用图标，点击事件不生效
woshishui099的博客
11-28 2078
<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; 注释：如果把两个样式放到同一级，会期冲突，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卡尔特斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值