html 透明层禁止点击事件,(转)CSS3之pointer-events(屏蔽鼠标事件)属性说明

最新推荐文章于 2025-05-30 14:49:10 发布
转载 最新推荐文章于 2025-05-30 14:49:10 发布 · 1.1w 阅读 · 3 ·
CC 4.0 BY-SA版权
原文链接：http://www.taodudu.cc/news/show-4311812.html?action=onClick
文章标签：

#html #css3 #计算机外设

我们在 HTML 开发时可能会遇到这样的情况：页面上有一些元素使用绝对定位布局，这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下，下方元素被遮挡的部分是不会响应鼠标事件的。

但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如：我们在一个地图组件上覆盖了一个显示信息的元素，但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。

一、pointer-events 属性介绍

1，属性值说明

pointer-events 是 CSS3 中新增的一个属性，其支持的值大多都与 SVG 相关，我们不用理会。对我们来说，主要关注：none|auto 这两个属性值。

auto：与 pointer-events 属性未指定时的表现效果相同。

none：该元素永远不会成为鼠标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

pointer-events:none 注意事项：

使用 pointer-events:none 来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。

如果元素后代明确指定了 pointer-events 属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。

当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

2，浏览器兼容情况

(1)桌面浏览器

IE：11+(IE6~IE10均不支持)

Firefox：3.6＋

Chrome：4.0+

Safari：6.0

Opera：15.0

(2)移动设备浏览器

iOS Safari：6.0

Android Browser：2.1+

Android Chrome：18.0+

二、使用样例

1，让链接不能点击

这里将第二个 a 标签 pointer-events 样式属性设置为 none，那么该链接不仅无法被点击，而且没有鼠标手形样式。(同样的，我们可以使用该样式来避免按钮多次点击、表单重复提交等问题。)

00d4674914544c655785e7bc2b9a7fc2.png

可以点击的链接
不能点击的链接
2，让鼠标点击穿透上方的 div

(1)效果图

下面样例中黄色半透明的 div 使用绝对定位，覆盖在链接的上方。

默认情况下，黄色区域下方的链接我们是没法点击到的。

这里我们对黄色 div 加上一个 pointer-events 属性后，就可以穿过该层去点击下面的 a 标签了。

6788c8452a877d74aacb33c25b2211f6.png

(2)样例代码

.top {
width: 100px;

height: 90px;

position: absolute;

top: 0;

left: 65px;

background: yellow;

opacity: 0.5;

pointer-events: none;

}

航歌
hangge.com
pointer-events属性屏蔽鼠标事件(点击穿透上层元素)

应用场景 我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部.默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的 …

浏览器 Pointer Events

前言 Pointer Events是一套触控输入处理规格,支持Pointer Events的浏览器包括了IE和Firefox,最近Chrome也宣布即将支持该处理规则. PointerEvent Po …

HTML 事件属性(下)

HTML 事件属性(下) 一:键盘事件 (Keyboard Events)二:鼠标事件 (Mouse Events) 一:键盘事件 (Keyboard Events)在下列元素中无效:base.bdo …

css屏蔽元素的鼠标事件pointer-events

// 屏蔽点击 $(‘body’).css(‘pointer-events’, ‘none’); //恢复默认 $(‘body’).css(‘pointer-events’, ‘auto’); 用 …

win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息

原文:win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息 在 WPF 经常需要重写一套触摸事件,没有UWP的Pointer那么好用. 如果一直都觉得 WPF 的触摸做的不好,或想解决 …

C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件

原文:C#引用CefSharp并屏蔽鼠标右键和禁止拖动放置事件 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013564470/article/ …

QT–控件屏蔽鼠标点击事件

源博客:https://blog.csdn.net/qiufenpeng/article/details/81745266 最近学习QT写一个小界面想屏蔽鼠标点击,原来只要一个函数就搞定了. ui-& …

css3 -阻止元素成为鼠标事件目标 pointer-events

pointer-events:auto|none 其中pointer-events:none:元素永远不会成为鼠标事件的target.

css3 pointer-events 让对象如透明般直接响应下层对象的鼠标事件

引用:http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 语法: pointer-events:aut …

随机推荐

mybatis配置问题

//当构造函数有多个参数时,可以使用constructor-arg标签的index属性,index属性的值从0开始.

项目二(业务GO)——跨域上传图片(请求接口)

之前,就听过“跨域上传”图片的问题,只是疏于研究,也就一再搁置,直至今天再次遇见这个不能避免的“坑”,才不得不思考一下,怎么“跨域上传”图片或者文件? 问题来源: 何为“跨域”? ——就是给你一个接口 …

Bad version number in .class file

TY项目是用JDK1.6做的,早先在电脑上装了一个1.5的,这回就不能用了.为了能用,我就又装了一个1.6的,修改了环境变量之后,以为一切OK.开始测试,首先在Myeclipse中打开我用1.5编的一 …

OpenStack 镜像制作之cloud-init

Contents [hide] 1 背景 2 密钥登录 2.1 密钥登录的原理 2.1.1 openstack的私钥 2.1.2 密码注入 = 2.1.3 实际遇到的情况 2.1.4 解决办法 背景 …

Good subsequence( RMQ+二分)

Description Give you a sequence of n numbers, and a number k you should find the max length of Good …

Android.mk各种文件编译汇总

一.源代码编译 1.1 so预编译 LOCAL_PATH:= $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := libAppArea LOCAL …

得到指定进程PID

//#include “targetver.h” #include “stdio.h” #include #include …

获取某个文件夹中所有txt文件

Qt窗口的标题栏自绘

因个人需要,要修改Qt Widget的标题栏,网上找了大半天,没有得到答案,但发现问的人比较多 所以现将找到的此文分享一下. (原文:http://www.qtsoftware.com/develop …

Markdown转HTML/pdf格式

Markdown转HTML/pdf格式 通过_github自带_的更新博客的网页: https://github.com/YOUR_GITHUB_ACCOUNT/YOUR_GITHUB_ACCOUNT …

jill12
关注
CSS属性pointer-events
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
11-13 875
是一个CSS属性，它指定了在何种情况下（如鼠标点击、触摸事件等）可以作用到元素上。这个属性主要用于处理指针设备（如鼠标、触摸屏）的事件。这样，当鼠标悬停在图片上时，它会触发图片的鼠标事件，例如点击或触摸事件。而当鼠标悬停在容器上时，它不会触发任何鼠标事件。现在，如果你想让图片在鼠标悬停时接收鼠标事件（如点击），并且不希望父元素（容器）捕获这些事件，你可以使用。来让图片正常捕获指针事件。通过这样的设置，你可以控制哪些元素会响应指针事件，并确保正确的交互行为。来让容器不捕获指针事件，并使用。
CSS 的pointer-events属性，控制元素如何响应用户指针事件
读心悦
09-25 929
CSS中的属性是一个用于控制元素如何响应用户指针事件（如鼠标点击、触摸等）的重要属性。这个属性可以应用于任何HTML元素，以决定元素是否能够捕获和响应用户的交互事件。以下是关于。
pointer-events
珎珎啊
09-18 309
元素默认的 pointer-events 属性为 auto ，鼠标(其实不一定是鼠标，也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应动作； 将元素的 pinter-events 属性设置为 none，鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获； 若HTML上两个元素之间没有包含关系，那么，鼠标事件就不会在这两个元素之间传递，而是上层的元素会覆盖下层的元素，导致下层元素捕获不到事件；将上层元素的 pointer
前端pointer-events属性
m0_69301850的博客
05-30 528
如顶部图，粉色区域有点击事件不会触发，而是会穿透粉色区域，落在区域后的对应元素上。
html pointer-events
qq_36154659的博客
03-07 225
参考 https://www.cnblogs.com/kunmomo/p/11752669.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events
神奇的css属性pointer-events
weixin_34232617的博客
03-17 189
绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下 <!DOCTYPE html> <html> <head> ...
css禁用鼠标点击事件
weixin_34402408的博客
11-16 547
style="pointer-events: none" 转载于:https://www.cnblogs.com/JimmyBright/p/4969382.html
pointer-events属性
qq_41662119的博客
08-03 436

 根据MDN上的解释如下：
 CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时，SVG内容表现如同visiblePainted。
 除了指定元素不成为鼠标事件的目标，none值还指示鼠标事件穿过该元素，并指向位于元素下面的元素
 语法：
 pointer-events:...
css中pointer-events属性详解
12-13
在CSS中，`pointer-events`属性是一个非常实用的特性，它允许开发者控制元素如何响应鼠标交互。这个属性尤其在处理绝对定位元素时显得尤为重要，因为这些元素可能会覆盖其他元素，导致用户无法与底层元素进行交互。`...
css pointer-events属性实现下面元素可点击
09-25
通过JavaScript监听`checkbox`的`onclick`事件，动态地添加或移除`pointer-events-none`类，从而切换`overlay`元素对鼠标事件的响应。 浏览器支持方面，Firefox 3.6+、Safari 4和Google Chrome已经支持`pointer-...
pointer在html作用,详解pointer-events属性的使用
weixin_42354992的博客
06-20 2417
首先我们来看看pointer-events属性的作用：当在HTML元素上使用pointer-events属性时，它可以指定元素是否能响应鼠标(或触摸)事件。它可以用于防止单击、状态(CSS活动、焦点和悬停状态)和光标操作(例如，在链接上显示指针光标)。你可以让元素响应指针事件(auto)，或者阻止它执行此操作(none)。如果阻止它响应指针事件，则其下面的元素将成为这些事件的目标。如果单击该元素，...
css的pointer-events属性
weixin_30902251的博客
04-11 99
今天在蓝色上无意中看到pointer-events属性，很好奇，以前还从未使用过这个属性，原来它的作用是：当一个元素覆盖在另一个元素上，而我们又想点击被覆盖的那个元素，这时这个属性就派上用场了。 pointer-events的默认属性为auto，如我们要想实现上面的效果则应把它的属性设为none；不过到目前为止，仅Firefox 3.6+、Safari 4 和...
CSS里的pointer-events属性
默默努力的猪
04-14 602
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够： 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的hover和active状态的变化触发事件 阻止JavaScri
html css 鼠标手,CSS3 超实用属性：pointer-events
weixin_32445895的博客
06-07 468
最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止CSS里的hover和active状态的变化触发事件阻止JavaScript点击动作触发的事件一条CSS可以做许多事情是不是很神奇，我们在看一下兼容性情况如何。...
用纯CSS禁止鼠标点击事件
weixin_30289831的博客
09-20 732
JavaScript有一个preventDefault方法, 他可用以来取消事件的默认动作。比如取消打开链接，选择文本或拖放等。 event.preventDefault() 该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 E...
html dom style pointer-events,CSS之pointer-events属性
weixin_33178459的博客
06-16 511
pointer-events 可选的属性值autononevisiblepaintedvisiblefillvisiblestrokevisiblepaintedfillstrokeall其中，对于非 元素，只有属性 auto 和 none 有效；为非 svg 元素指定属性值情况1：两个父子元素重叠有如下代码：#div_grandfather{height : 250px;background:...
css3 禁止点击
u013611033的博客
04-16 426
pointer-events: none;
`pointer-events none` 与 `visibility hidden` 在事件处理上有何区别？
最新发布
07-01
<think>我们正在比较两个CSS属性：`pointer-events:none`和`visibility: hidden`在事件处理上的区别。根据引用[1][2][3][4]的内容，我们可以总结如下：1. `pointer-events:none`:-元素不会成为鼠标事件的目标（即不会触发该元素的事件监听器）。-但是，如果其后代元素设置了`pointer-events:auto`（或其他允许事件的值），那么事件可以指向后代元素，并且在事件捕获或冒泡阶段，父元素（设置了`pointer-events: none`）的事件监听器仍然可能被触发（因为事件会经过父元素）。-事件会穿透该元素，被其下方的元素捕获（即事件发生在后面的内容上）[^1][^2][^3]。2. `visibility:hidden`:-元素在视觉上隐藏，但根据引用[4]的表格，当`visibility:hidden`时，元素不会接收鼠标事件（即事件不会被该元素或其子元素捕获）。-引用[4]中说明：当设置`visibility:hidden`时，点击元素（无论是轮廓还是填充）都不能被捕捉到（表格中第六列为×）。注意：虽然元素隐藏，但事件不会穿透到其下方的元素，因为该元素仍然占据布局空间（只是不可见），但事件不会触发，也不会被其子元素触发（因为子元素也隐藏了）。-另外，根据标准，`visibility:hidden`的元素不会接收事件，事件会直接跳过该元素，但不会穿透到下面的元素（因为该元素仍然在文档流中占据位置，事件发生在该元素上，但由于隐藏，事件不会被处理，也不会传递到下面的元素）。然而，我们需要更精确地理解事件穿透：-对于`pointer-events:none`：事件会穿透该元素，就像该元素不存在一样，因此事件会落在该元素后面的元素上（即该元素下方的元素，在z-index层次结构中位于其下方的元素）。-对于`visibility:hidden`：元素虽然不可见，但它在布局中仍然占据空间。但是，它不会响应任何事件，而且事件也不会被其子元素响应（因为子元素也隐藏了）。更重要的是，事件不会穿透到该元素后面的元素（因为该元素仍然在文档流中，它挡住了后面的元素，尽管它不可见）。但是，注意：在事件传递过程中，由于元素隐藏，事件不会在该元素上触发，但事件的目标可能是该元素后面的元素吗？实际上，事件传递的路径仍然是按照DOM层次结构，但隐藏元素不会成为事件目标，也不会阻止事件传递到其后面的元素吗？这里需要澄清：`visibility:hidden`的元素在布局中占据空间，因此它下面的元素（在层叠上下文中）实际上被它覆盖（即使不可见），所以事件不会到达下面的元素。而`pointer-events: none`的元素不阻止事件穿透，因此事件可以到达下面的元素。因此，主要区别：-`pointer-events: none`：元素自身不捕获事件，但事件可以穿透它，被其下方的元素捕获（事件目标可能是下方的元素）。-`visibility: hidden`：元素自身不捕获事件，同时事件也不会穿透（因为元素仍然占据布局空间，遮挡了下方的元素，所以下方的元素不会接收到事件）。但是，引用[4]中表格的第六列指出：当`visibility:hidden`时，点击元素（包括轮廓和填充）都不能被捕捉到。而且，它并没有提到事件穿透。实际上，根据标准，`visibility: hidden`的元素不会成为事件目标，同时也不会让事件穿透到其下方的元素，因为该元素在布局中仍然存在，它遮挡了其下方的元素（在同一个位置）。所以，总结：|属性|是否可见|是否占据布局空间|是否响应事件 |是否允许事件穿透（即事件落到下方元素） ||--------------------------|----------|------------------|--------------|--------------------------------------|| `pointer-events:none`|是|是|否|是|| `visibility:hidden`|否|是|否|否（因为元素占据空间，遮挡下方元素）|注意：还有一种情况是`display: none`，它会让元素既不显示，也不占据布局空间，因此事件会穿透（因为元素从渲染树中移除，下方元素会占据该位置，所以事件会落在下方元素上）。因此，在事件穿透方面：- `pointer-events:none`：事件穿透，下方元素可以接收到事件。-`visibility: hidden`：事件不会穿透，因为元素虽然不可见，但占据空间，挡住了下方元素，所以下方元素不会接收到事件（事件发生在该隐藏元素上，但该元素不处理事件，也不传递事件，所以事件没有被处理）。但是，根据引用[2]：`pointer-events: none`的元素，如果其后代元素设置了`pointer-events: auto`，那么事件可以指向后代元素。而`visibility: hidden`的元素，其后代元素也是隐藏的，所以不会响应事件。另外，在事件冒泡和捕获阶段：-对于`pointer-events:none`的元素，如果事件发生在该元素的子元素（子元素设置了`pointer-events: auto`）上，那么事件在冒泡或捕获阶段经过该元素时，该元素上绑定的事件监听器还是会被触发的（尽管事件目标不是它）。-对于`visibility: hidden`的元素，即使事件发生在该元素的位置上（但由于隐藏，事件不会发生在该元素或子元素上），所以不会触发该元素或其子元素的事件监听器。所以，区别如下：1.事件穿透能力：-`pointer-events: none`允许事件穿透到该元素下方的其他元素（即该元素在视觉上可能遮挡，但事件可以穿过）。-`visibility: hidden`不会让事件穿透，因为该元素仍然占据布局空间，遮挡了其下方的元素（尽管不可见），所以事件不会落到下方的元素上。2.子元素的事件处理：-`pointer-events: none`不会影响子元素的事件处理（只要子元素设置了`pointer-events: auto`，子元素就可以接收事件，并且事件在冒泡或捕获阶段会触发父元素的事件监听器）。- `visibility:hidden`会使整个子树都不可见，所以子元素不会接收事件（无论子元素设置什么），也不会触发事件监听器。3.视觉表现：-`pointer-events: none`的元素在视觉上仍然可见（除非同时设置了透明或隐藏）。- `visibility:hidden`的元素在视觉上不可见。4.布局影响：-两者都占据布局空间（与`display: none`不同）。示例代码说明：示例1：`pointer-events:none````html<divstyle="pointer-events: none; position: absolute; width:100px; height:100px; background: rgba(0,0,255,0.5);"><buttonstyle="pointer-events: auto;">Clickme</button></div> <div style="position: absolute; top:50px; left:50px; width:100px; height:100px; background: red;">Underlying element</div>```在这个例子中：-蓝色半透明div设置了`pointer-events: none`，所以它本身不会捕获事件。-但是内部的按钮设置了`pointer-events: auto`，所以按钮可以点击。-当点击按钮时，事件会触发按钮的点击事件，并且在事件冒泡阶段会经过父div（蓝色div），如果父div有事件监听器，也会被触发。-当点击蓝色div的区域（非按钮区域）时，事件会穿透蓝色div，落在红色div上（触发红色div的事件）。示例2：`visibility: hidden` ```html<divstyle="visibility:hidden;position:absolute;width:100px;height:100px;background:rgba(0,0,255,0.5);"><button>Click me</button> </div><divstyle="position:absolute;top:50px;left:50px;width:100px;height:100px;background:red;">Underlying element</div>```在这个例子中：-蓝色div隐藏，包括其内部的按钮也隐藏。-整个蓝色div占据空间，遮挡了其下方的红色div（在相同位置的部分）。-点击蓝色div区域（包括按钮区域）时，事件不会触发蓝色div或按钮的事件监听器，同时也不会触发红色div的事件（因为蓝色div虽然隐藏，但占据空间，红色div在蓝色div的下方，但被蓝色div遮挡的部分不会被点击到）。因此，结论是：-使用`pointer-events:none`时，事件穿透，下方元素可以接收到事件。-使用`visibility: hidden`时，事件不会穿透，下方元素无法接收到被遮挡部分的事件。引用说明：-引用[1]和[3]说明了`pointer-events: none`的事件穿透特性。-引用[2]说明了`pointer-events:none`的元素不会成为事件目标，但子元素可以，并且事件冒泡/捕获阶段会触发父元素的事件监听器。-引用[4]说明了`visibility: hidden`时，元素不会捕捉到事件（无论点击轮廓还是填充）。因此，我们可以这样回答用户的问题：</think>### `pointer-events: none` 与 `visibility: hidden` 在事件处理上的核心区别 #### 1. **事件响应机制** | 属性 | 是否响应事件 | 事件穿透能力 | |---------------------------|----------------------------------|--------------------------| | `pointer-events: none` | ❌ 元素自身**完全不响应**任何指针事件 | ✅ 事件**会穿透**到下方元素 | | `visibility: hidden` | ❌ 元素自身**不响应**事件 | ❌ 事件**不会穿透**到下方元素 | **关键区别**： - `pointer-events: none` 允许事件穿透到下层元素（如点击透明层下的按钮）[^1][^2] - `visibility: hidden` 会**阻止事件穿透**，因为元素仍占据布局空间（相当于不可见的实体墙）[^4] --- #### 2. **子元素行为** ```html <!-- 示例：父元素禁用，子元素可点击 --> <div style="pointer-events: none;"> <button style="pointer-events: auto;">可点击</button> </div> <!-- 示例：visibility: hidden 的子元素 --> <div style="visibility: hidden;"> <button>不可点击</button> <!-- 子元素同样不响应事件 --> </div> ``` - `pointer-events: none`： 子元素可通过 `pointer-events: auto` **单独启用事件响应**，事件冒泡阶段可能触发父元素监听器[^2] - `visibility: hidden`： 子元素**永远无法响应事件**（继承隐藏状态）[^4] --- #### 3. **视觉与布局表现** | 属性 | 是否可见 | 是否占据布局空间 | 典型用例 | |---------------------------|----------|------------------|-----------------------------| | `pointer-events: none` | ✅ 可见 | ✅ 占据空间 | 透明覆盖层、地图标记[^1][^3] | | `visibility: hidden` | ❌ 不可见 | ✅ 占据空间 | 保留布局的隐藏元素 | **关键区别**： - `pointer-events: none` 是**纯事件控制**，不影响视觉渲染 - `visibility: hidden` 是**视觉隐藏**，但保留物理布局空间 --- #### 4. **事件穿透深度对比 ```html <div class="layer-A" style="pointer-events: none"> <!-- 点击穿透到B --> </div> <div class="layer-B"> 能接收A穿透的事件 ✅ </div> <div class="layer-C" style="visibility: hidden"> <!-- 点击被阻挡 --> </div> <div class="layer-D"> 无法接收C下方的事件 ❌ </div> ``` --- ### 总结对比表 | 特性 | `pointer-events: none` | `visibility: hidden` | |--------------------------|------------------------|----------------------| | **自身事件响应** | ❌ | ❌ | | **子元素可单独启用事件** | ✅ | ❌ | | **事件穿透** | ✅ | ❌ | | **视觉可见性** | 保持可见 | 隐藏 | | **占据布局空间** | ✅ | ✅ | | **典型用例** | 透明交互层、SVG控制 | 保留占位的隐藏元素 | > 示例：地图应用 > ```css > .map-overlay { > pointer-events: none; /* 覆盖层不拦截事件 */ > } > .hidden-toolbar { > visibility: hidden; /* 隐藏但占位，不穿透事件 */ > } > ``` [^1]: 通过 `pointer-events: none` 实现事件穿透到下层元素[^1][^3] [^2]: 子元素设置 `pointer-events: auto` 可单独启用事件响应[^2] [^4]: `visibility: hidden` 元素占据空间且阻止事件穿透[^4]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值