CSS 设置 pointer-events 忽略鼠标事件

已于 2024-07-23 20:33:45 修改
阅读量1k 收藏 12
点赞数 6
分类专栏： CSS 文章标签： css 计算机外设 前端
于 2024-07-23 20:33:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20765533/article/details/140645445
版权

文章目录

概念

pointer-events 属性用于设置元素是否对鼠标事件做出反应。 默认值为 auto，就是元素对鼠标事件做出反应，可设置为 pointer-events: none; 表示元素忽略鼠标事件。

用最简单的话来说，只要设置了 pointer-events: none; 任何鼠标事件都将被无效化（例如：点击事件、鼠标移入移除、css 的 hover 等）。

默认值 auto

让我们上代码来看下没有设置 pointer-events: none; 的效果是什么

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #demo {
     
        width: 200px;
        height: 200px;
最低0.47元/天 解锁文章
CSS属性pointer-events
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
11-13 852
是一个CSS属性，它指定了在何种情况下（如鼠标点击、触摸事件等）可以作用到元素上。这个属性主要用于处理指针设备（如鼠标、触摸屏）的事件。这样，当鼠标悬停在图片上时，它会触发图片的鼠标事件，例如点击或触摸事件。而当鼠标悬停在容器上时，它不会触发任何鼠标事件。现在，如果你想让图片在鼠标悬停时接收鼠标事件（如点击），并且不希望父元素（容器）捕获这些事件，你可以使用。来让图片正常捕获指针事件。通过这样的设置，你可以控制哪些元素会响应指针事件，并确保正确的交互行为。来让容器不捕获指针事件，并使用。
使用css3：pointer-events，允许点击穿透
柯闪电，一位前端小白的博客。
02-27 1556
背景 年前产品提了个需求，希望在页面元素最上层加上灯笼与下雪的动画，并且不影响下层元素的滑动与点击操作。于是，这个css3属性就登场了 属性介绍 pointer-events MDN上的属性介绍：The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events. 我的粗浅理解： 定义了这个属性的元
CSS属性：pointer-events（鼠标穿透元素）
Mgf_Yzy的博客
01-15 1574
CSS新属性：pointer-events，穿透遮挡元素实现点击事件
HTML/CSS 遮罩层登录框
木木木森林
12-29 500
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> .
前端，css图片穿透，不响应任何鼠标事件或触摸事件
最新发布
m0_62164804的博客
04-18 82
pointer-events 属性控制一个元素是否能够接收用户的指针事件。指针事件通常指鼠标点击、悬停、拖动，或者触摸事件等。这些事件可以用来触发元素的交互，例如按钮点击、链接跳转、元素拖动等。none：元素不会响应任何鼠标事件或触摸事件，所有指针事件都会被忽略。auto：元素可以正常接收鼠标事件（默认值）。pointer-events的常见值。
css ----pointer-events属性
qq_62528974的博客
01-15 1171
是一个CSS属性，它定义了在何种情况下元素可以成为鼠标事件（或触摸事件）的目标。这个属性可以控制元素是否可以被点击、是否可以触发鼠标事件，或者是否应该忽略鼠标事件，。
CSS pointer-events属性的使用
weixin_33832340的博客
07-21 569
楔子 在前端的开发中，我们都是直接与用户接触，应该尽量让用户感到操作畅快愉悦，获得类似native的感觉。其中动画是最常用的方法。 这里的需求是，弹层的设计，这个弹层希望可以像 native 上的弹层一样，点击按钮出现，点击遮罩或按钮时关闭，并且出现和关闭时有动画效果（fade，slide等）。 问题 在关闭弹层时，以fadeOut动画效果为例，我这里是利用opacity从1 -> 0的过...
CSS3 超实用属性：pointer-events （可穿透图层的鼠标事件）
热门推荐
yiyueqinghui的博客
10-23 2万+
1、是什么 pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。 简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件) 2、具体属性分析 用法分析： pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all auto ---
CSS pointer-events属性深度解析与应用示例
在前端开发中，用户交互体验至关重要，而CSS中的`pointer-events`属性则提供了一种控制元素是否响应鼠标事件的能力。这篇文章主要探讨了`pointer-events`属性的使用及其在实际场景中的应用。 `pointer-events`属性...
pointer-events 仅开放悬浮事件
12-07
在CSS中，`pointer-events`属性用于控制元素是否响应鼠标事件。默认情况下，元素会响应所有鼠标事件，但通过设置`pointer-events`属性，可以改变这一行为。 如果你希望一个元素仅响应悬浮事件（如`hover`），而忽略...
pointer-events 的用法
01-01
document.getElementById('myButton').style.pointerEvents = "none"; }); ``` ##### SVG 应用场景 对于复杂的SVG图表而言，有时需要让部分区域响应触摸/点击而另一些则保持静默。此时就可以针对不同路径分别设定...
纯CSS3冰川北极熊动画特效
07-24
纯CSS3冰川北极熊动画特效是一款卡通可爱的北极熊站在冰面上漂浮动画场景特效。
【转】CSS3 超实用属性：pointer-events
weixin_33843409的博客
06-13 545
为什么80%的码农都做不了架构师？>>> ...
认识 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 属性
无心使然云中漫步
01-11 1109
只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部或边界时，元素才会成为鼠标事件的目标，fill 和 stroke 属性的值不影响事件处理。只有在元素 visibility 属性值为 visible，且鼠标指针在元素边界时，元素才会成为鼠标事件的目标，stroke 属性的值不影响事件处理。只有在元素 visibility 属性值为 visible，且鼠标指针在元素内部时，元素才会成为鼠标事件的目标，fill 属性的值不影响事件处理。/ 以下只适用于 SVG /
CSS里的pointer-events属性
默默努力的猪
04-14 592
现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript，它能够： 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的hover和active状态的变化触发事件 阻止JavaScri
Jquery——弹幕效果
Zjaun的博客
02-13 687
css样式 &lt;style type="text/css"&gt; html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: "微软雅黑"; font-size: 62.5%; } .bo...
position:relative 的深入理解，欢迎探讨
mixer_a的专栏
05-25 376
对于css中的position:relative;我始终搞不明白它是什么意思，有什么作用？ 对于position的其它几个属性，我都搞懂了 引用 static : 　无特殊定位，对象遵循HTML定位规则 absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边...
CSS3 pointer-events
Jana Jing的分享
04-17 1424
CSS新属性pointer-events：字面理解是点击鼠标事件，值分别是auto和none。· pointer-events属性值详解 auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。 none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了p...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值