css禁用元素指针事件,鼠标穿透,点击下层元素,用`pointer-events:none;`

pointer-events: 对鼠标事件的反应

MDN pointer-events 英文 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

菜鸟教程 CSS pointer-events 属性 https://www.runoob.com/cssref/css3-pr-pointer-events.html

常用取值 autonone

  • pointer-events: auto; 默认值

    pointer-events:auto; 
    
  • pointer-events: none; 鼠标穿透,使鼠标事件无效

    pointer-events:none;
    

取值

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill; /* SVG only */
pointer-events: visibleStroke; /* SVG only */
pointer-events: visible; /* SVG only */
pointer-events: painted; /* SVG only */
pointer-events: fill; /* SVG only */
pointer-events: stroke; /* SVG only */
pointer-events: all; /* SVG only *//* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

pointer-events: none;

pointer-events:none;

css停用元素的鼠标事件可用pointer-events: none;

<button onclick="alert(this.innerHTML);" style="pointer-events:auto;"> style="pointer-events:auto;" </button>
<button onclick="alert(this.innerHTML);" style="pointer-events:none;"> style="pointer-events:none;" </button>
<button onclick="alert(this.innerHTML);" > 没有设置<code>pointer-events</code> </button><style>button{font-size:36px; height:100px;}
</style>

pointer-events: none; 可以实现鼠标穿透

比如 button按钮 上面有个元素挡着

<article style="position:fixed; left:30%; top:20%; translate:-50% -50%; width:300px; height:200px; font-size:20px;"><button onclick="alert(this.innerHTML);" style="position:absolute; z-index:-100; inset:0; font-size:inherit;" >被遮挡<br/>的按钮</button><div style="position:absolute; z-index:-10; inset:0px; ">挡在Button上的div,使得点击不到下面的Button按钮</div>
</article><article style="position:fixed; left:60%; top:20%; translate:-50% -50%; width:300px; height:200px; font-size:20px;"><button onclick="alert(this.innerHTML);" style="position:absolute; z-index:-100; inset:0; font-size:inherit;" >被遮挡<br/>的按钮</button><div style="position:absolute; z-index:-10; inset:0px; pointer-events:none; ">挡在Button上的div,因为设置了<code>pointer-events:none</code>; 所以可以点击到下面的按钮</div>
</article><article style="position:fixed; left:30%; top:60%; translate:-50% -50%; width:300px; height:200px; font-size:20px;"><button onclick="alert(this.innerHTML);" style="position:absolute; z-index:-100; inset:0; font-size:inherit;" >被遮挡<br/>的按钮</button><div style="position:absolute; z-index:-10; inset:0px; pointer-events:auto; ">挡在Button上的div,设置了<code>pointer-events:auto</code>; 如同没设置一样,点击不到下面的按钮</div>
</article><style>code{color:red;}</style>

CSS的pointer-events属性用于控制HTML元素如何响应鼠标和触摸事件,如点击、悬停等。这个属性决定了在何种情况下元素能够成为鼠标或触摸事件的目标。pointer-events属性有多种可能的值,但其中两个最常用的值是noneauto

  • none:当元素的pointer-events属性设置为none时,该元素将不会成为鼠标或触摸事件的目标。换句话说,用户与这个元素的交互将被忽略,点击或触摸这个元素时,事件会“穿透”到该元素下方的其他元素上。这可以用于创建视觉上的覆盖层,但不影响用户与底层元素的交互。
  • auto:这是pointer-events属性的默认值。当设置为auto时,元素将正常接收并响应鼠标和触摸事件。

例如,你可以使用以下CSS代码来设置元素的pointer-events属性:

.element {pointer-events: none; /* 元素不会对鼠标或触摸事件做出反应 */
}.another-element {pointer-events: auto; /* 元素正常接收并响应鼠标和触摸事件 */
}

需要注意的是,pointer-events属性是一个可继承属性,这意味着如果父元素设置了该属性,而子元素没有设置,那么子元素将继承父元素的pointer-events属性值。

总的来说,pointer-events属性为开发者提供了灵活的方式来控制元素与鼠标和触摸事件的交互,从而可以创建出更丰富、更有趣的用户体验。




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/761809.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql - Explain 详解

Explain 详解 前言 一条查询语句在经过MySQL查询优化器的各种基于成本和规则的优化会后生成一个所谓的执行计划&#xff0c;这个执行计划展示了接下来具体执行查询的方式&#xff0c;比如多表连接的顺序是什么&#xff0c;对于每个表采用什么访问方法来具体执行查询等等。设计…

【Python脚本随手笔记】 ---基于鸿蒙系统LiteOS实现差分编译脚本(下篇)

💌 所属专栏:【Python脚本随手笔记】 😀 作  者:我是夜阑的狗🐶 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询! 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘 文章目录 前言一、&…

mac下Appuim环境安装-持续更新中

参考资料 Mac安装Appium_mac电脑安装appium-CSDN博客 安卓测试工具&#xff1a;Appium 环境安装&#xff08;mac版本&#xff09;_安卓自动化测试mac环境搭建-CSDN博客 1. 基本环境依赖 1 node.js 2 JDK&#xff08;Java JDK&#xff09; 3 Android SDK 4 Appium&#x…

如何优化前端项目的 SEO

在当今数字化时代&#xff0c;网站对于企业的重要性不言而喻。然而&#xff0c;一个优秀的网站如果在搜索引擎中排名靠后&#xff0c;将无法吸引到足够的流量和用户。因此&#xff0c;优化前端项目的SEO已经成为了网站拓展业务、提升品牌知名度的必经之路。 响应式设计与移动优…

C# 方法的传参

引用传参 using System;public class Program {public static void Main(){Tools t new Tools();t.bf();double a 10;double b 20;t.change(ref a, ref b);Console.WriteLine(b);} }class Tools {public void af() {Console.Write("a\n");}internal void bf() {C…

ByteMD - 掘金社区 MarkDown 编辑器的免费开源的版本,可以在 Vue / React / Svelte 中使用

各位元宵节快乐&#xff0c;今天推荐一款字节跳动旗下掘金社区官方出品的 Markdown 编辑器 JS 开发库。 ByteMD 是一个用于 web 开发的 Markdown 编辑器 JavaScript 库&#xff0c;是字节跳动&#xff08;也就是掘金社区&#xff09;出品的 Markdown 格式的富文本编辑器&#…

利用Python进行数据清洗与预处理:Pandas的高级用法【第147篇—Pandas的高级用法】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 利用Python进行数据清洗与预处理&#xff1a;Pandas的高级用法 在数据科学和机器学习领域&…

Flutter编译卡在Running Gradle task ‘assembleDebug

1、翻墙 2、修改国内镜像源&#xff08;以下以Flutter 3.19.3版本为例&#xff09; 找到Flutter SDK目录下的Flutter配置文件resolve_dependencies.gradle 路径&#xff1a;flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle 1)、第一处修改&#xff1a; g…

大模型: 多角色对话系统解释

文章目录 一、什么是多角色对话二、messages中的角色划分1、user&#xff08;用户&#xff09;2、assistant&#xff08;助手&#xff09;3、system&#xff08;系统&#xff09; 一、什么是多角色对话 二、messages中的角色划分 1、user&#xff08;用户&#xff09; 表示用…

AI绘画自动生成器:让艺术创作触手可及

随着人工智能技术的飞速发展&#xff0c;越来越多的应用领域逐渐与AI技术融合。在艺术领域&#xff0c;AI绘画自动生成器成为了一款备受关注的产品。它利用深度学习算法&#xff0c;让用户通过输入关键词或描述性文本&#xff0c;就能在几秒钟内生成一幅独特的艺术作品。在这篇…

如何下载和安装 macOS

在兼容的 Mac 电脑上下载并安装最新或以前版本的 Mac 操作系统。 为了保持电脑的安全性、稳定性和兼容性&#xff0c;Apple 建议使用与你的 Mac 兼容的最新版 macOS。macOS 更新和升级还包含最新的功能和内建 App&#xff08;如 Safari 浏览器&#xff09;。 使用“软件更新”…

通过value对key进行排序

347.前 K 个高频元素 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] class Solution(object):def topKFrequent(self, nums, k):""&quo…

选择器加练习

一、常用的选择器 1.元素选择器 语法 : 标签名{} 作用 : 选中对应标签中的内容 例:p{} , div{} , span{} , ol{} , ul{} ...... 2.类选择器(class选择器) 语法 : .class属性值{} 作用 : 选中对应class属性值的元素 注意:class里面的属性值不能以数字开头,如果以符号开头,…

Java中最简单的添加日志链路的方式之一

Java项目中添加日志链路功能的设计与实现 文章目录 Java项目中添加日志链路功能的设计与实现前言一、日志链路的概念与作用二、添加日志链路的设计思路三、如何支持多线程下的日志打印也附加上日志链路id1. 示例1&#xff1a;实现Runnable接口&#xff0c;无返回值2. 示例2&…

适配器模式与桥接模式-灵活应对变化的两种设计策略大比拼

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自&#xff1a;设计模式深度解析&#xff1a;适配器模式与桥接模式-灵活应对变…

Spark Rebalance hint的倾斜的处理(OptimizeSkewInRebalancePartitions)

背景 本文基于Spark 3.5.0 目前公司在做小文件合并的时候用到了 Spark Rebalance 这个算子&#xff0c;这个算子的主要作用是在AQE阶段的最后写文件的阶段进行小文件的合并&#xff0c;使得最后落盘的文件不会太大也不会太小&#xff0c;从而达到小文件合并的作用&#xff0c;…

sentinel熔断规则详解

1、慢调用降级熔断 1.1、参数详解 最大RT&#xff1a;调用接口的最大时间。 比例阈值&#xff1a;超过了最大RT调用时间的请求的比例。 熔断时长&#xff1a;触发熔断后&#xff0c;熔断的时间 最小请求数据&#xff1a;每秒最少的请求数量&#xff0c;只有大于等于这个数…

SQLiteC/C++接口详细介绍sqlite3_stmt类(九)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;六&#xff09; 下一篇&#xff1a; 无 33、sqlite3_column_table_name 函数 sqlite3_column_table_name 用于返回结果集中指定列所属的表的名称。如果查询中列使…

Android中的前台Service

文章目录 概念介绍使用场景启动方式结束方式概念介绍 前台服务可以说是除了绑定式Service和非绑定式Service之外,又一种Service类型。 顾名思义,它是运行在前台可以和用户打交道的Service。也因此它的优先级相比另外两个运行在后台的Service要高,几乎不会被系统回收。 使…

前端案例:产品模块

文章目录 产品模块效果结构布局分析父级盒子布局图片和段落评价和详情 产品模块效果 结构布局分析 1、大的父级盒子包含全部的内容 2、内容装入 图片&#xff08;img标签&#xff09;&#xff1b;分别三个子盒子装入两段评价以及商品信息。 父级盒子布局 div {width: 300px…