css中pointer-events:none属性对div里面元素的鼠标事件的影响

文章目录

  • 前倾提要
  • 当没有设置属性pointer-events时候
    • 结果
  • 当子元素设置了pointer-events: none
    • 修改后的代码
    • 结果如下所示
  • 当父元素设置了pointer-events: none
  • 若两个div同级也就是兄弟级

前倾提要

在gis三维开发的地图组件上放一个背景图片,左右两侧的颜色渐变等,或者gis三维地图上放一张设计过的图片作为地球覆盖在上面的背景时就很有用,即使整个div覆盖在地球上,也不影响操作三维地球。当然也可以通过定位的方式,在地球组件上的两侧创建两个div,然后设置背景颜色,左右两侧的div占一部分宽度。中间啥都没有,也不影响地球操作。但是左右两侧对应宽度的范围也会影响点击操作。

当没有设置属性pointer-events时候

有如下代码,如果我有两个div,其中第一个div有一个按钮,第二个div通过子绝父相的形式定位,覆盖在第一个div上面。这时就会有一个问题,覆盖在上面的div的鼠标事件就会影响第一个div的事件,也就是说,第一个div的按钮点不到,因为覆盖在上面了,上面的div挡住了点击第一个div的按钮。具体代码和结果如下所示:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;}.child {width: 800px;height: 600px;background-color: rgba(214, 57, 201, 0.699);position: absolute;top: 0;left: 0;}</style>
</head>
<body><div class="parent"><button id="buttonClick">父元素按钮点击事件</button><div class="child">子元素</div></div><script>function handleClick() {alert('点击了父元素里面的按钮!!!');}document.querySelector('#buttonClick').addEventListener('click', handleClick);// document.querySelector('.parent').addEventListener('click', handleClick);document.querySelector('.parent').addEventListener('click', function() {alert('点击父元素');});document.querySelector('.child').addEventListener('click', function() {alert('点击了子元素');});</script>
</body>
</html>

结果

结果如下所示:

在这里插入图片描述
在这里插入图片描述

可以发现我们无法点击到父元素中的按钮。那如果我需要覆盖的子div的颜色作为父元素的背景,然后又不影响父元素的点击按钮,那么我们该如何设置呢?具体往下看就知道了。这里有一个应用场景,在gis三维开发的地图组件上放一个背景图片,左右两侧的颜色渐变等,或者gis三维地图上放一张设计过的图片作为地球覆盖在上面的背景时就很有用,即使整个div覆盖在地球上,也不影响操作三维地球。当然也可以通过定位的方式,在地球组件上的两侧创建两个div,然后设置背景颜色,左右两侧的div占一部分宽度。中间啥都没有,也不影响地球操作。但是左右两侧对应宽度的范围也会影响点击操作。具体修改如下所示

当子元素设置了pointer-events: none

修改后的代码

在子组件添加对应的css属性pointer-events: none;,具体如下所示。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;}.child {width: 800px;height: 600px;background-color: rgba(214, 57, 201, 0.699);position: absolute;top: 0;left: 0;pointer-events: none;}</style>
</head>
<body><div class="parent"><button id="buttonClick">父元素按钮点击事件</button><div class="child">子元素</div></div><script>function handleClick() {alert('点击了父元素里面的按钮!!!');}document.querySelector('#buttonClick').addEventListener('click', handleClick);// document.querySelector('.parent').addEventListener('click', handleClick);document.querySelector('.parent').addEventListener('click', function() {alert('点击父元素');});document.querySelector('.child').addEventListener('click', function() {alert('点击了子元素');});</script>
</body>
</html>

结果如下所示

在这里插入图片描述
在这里插入图片描述
从结果可以看出,子元素的点击事件失效了。这是又有一个问题了,设置了pointer-events: none;之后,子元素中的按钮事件会不会受到影响呢?具体代码和结果如下所示:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;}.child {width: 800px;height: 600px;background-color: rgba(214, 57, 201, 0.699);position: absolute;top: 0;left: 0;pointer-events: none;}</style>
</head><body><div class="parent"><button id="buttonClick">父元素按钮点击事件</button><div class="child"><div>子元素</div><div><button id="childButtonClick">子元素按钮点击事件</button></div></div></div><script>function handleClick() {alert('点击了父元素里面的按钮!!!');}document.querySelector('#buttonClick').addEventListener('click', handleClick);// document.querySelector('.parent').addEventListener('click', handleClick);document.querySelector('.parent').addEventListener('click', function () {alert('点击父元素');});document.querySelector('.child').addEventListener('click', function () {alert('点击了子元素');});document.querySelector('#childButtonClick').addEventListener('click', function () {alert('点击了子元素里面的按钮,子元素按钮点击事件');});</script>
</body></html>

在这里插入图片描述
在这里插入图片描述
从上图可以发现,设置了pointer-events: none;之后,子元素里面的元素点击也失效了。要想让子元素的按钮单击事件生效,我们可以在子元素对应的按钮的div或者按钮上设置pointer-events: auto;即可,具体代码如下所示:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;}.child {width: 800px;height: 600px;background-color: rgba(214, 57, 201, 0.699);position: absolute;top: 0;left: 0;pointer-events: none;}.child-button {pointer-events: auto;}</style>
</head><body><div class="parent"><button id="buttonClick">父元素按钮点击事件</button><div class="child"><div>子元素</div><div class="child-button"><button id="childButtonClick">子元素按钮点击事件</button></div></div></div><script>function handleClick() {alert('点击了父元素里面的按钮!!!');}document.querySelector('#buttonClick').addEventListener('click', handleClick);// document.querySelector('.parent').addEventListener('click', handleClick);// document.querySelector('.parent').addEventListener('click', function () {//   alert('点击父元素');// });// document.querySelector('.child').addEventListener('click', function () {//   alert('点击了子元素');// });document.querySelector('#childButtonClick').addEventListener('click', function () {alert('点击了子元素里面的按钮,子元素按钮点击事件');});</script>
</body></html>

结果如下所示
在这里插入图片描述
在这里插入图片描述
也就是说,这里子元素和父元素点击都生效了。

当父元素设置了pointer-events: none

在父元素没有设置了pointer-events: none; 的时候。

代码如下所示

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;}</style>
</head><body><div class="parent"><button id="buttonClick">父元素按钮点击事件</button></div></div><script>document.querySelector('#buttonClick').addEventListener('click', function() {alert('点击了父元素里面的按钮!!!');});</script>
</body></html>

结果如下所示

在这里插入图片描述
可以发现里面的元素是能够正常点击的。当设置了pointer-events: none; 的时候。
代码如下所示:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;pointer-events: none;}</style>
</head><body><div class="parent"><button id="buttonClick">父元素按钮点击事件</button></div></div><script>document.querySelector('#buttonClick').addEventListener('click', function() {alert('点击了父元素里面的按钮!!!');});</script>
</body></html>

结果如下所示:
在这里插入图片描述
当按钮设置了pointer-events: auto;之后。代码如下所示。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;pointer-events: none;}.child {pointer-events: auto;}</style>
</head><body><div class="parent"><button class="child" id="buttonClick">父元素按钮点击事件</button></div></div><script>document.querySelector('#buttonClick').addEventListener('click', function() {alert('点击了父元素里面的按钮!!!');});</script>
</body></html>

结果
在这里插入图片描述
如果子元素不是内嵌到父div中时,而是以定位的方式定位到父元素上方时。
代码如下所示

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;pointer-events: none;}.child {pointer-events: auto;}.position-absolute {position: absolute;top: 0;left: 0;}</style>
</head><body><div class="parent"><button class="child" id="buttonClick">父元素按钮点击事件</button><div class="position-absolute"><button id="divButton">这是定位的div按钮点击事件</button></div></div></div><script>document.querySelector('#buttonClick').addEventListener('click', function () {alert('点击了父元素里面的按钮!!!');});document.querySelector('#divButton').addEventListener('click', function () {alert('这是定位-定位-定位-的按钮点击事件');});</script>
</body></html>

结果如下所示

在这里插入图片描述
在这里插入图片描述

当定位的div里面的按钮设置了pointer-events: auto;之后。代码如下所示。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;pointer-events: none;}.child {pointer-events: auto;}.position-absolute {position: absolute;top: 0;left: 0;pointer-events: auto;}</style>
</head><body><div class="parent"><button class="child" id="buttonClick">父元素按钮点击事件</button><div class="position-absolute"><button id="divButton">这是定位的div按钮点击事件</button></div></div></div><script>document.querySelector('#buttonClick').addEventListener('click', function () {alert('点击了父元素里面的按钮!!!');});document.querySelector('#divButton').addEventListener('click', function () {alert('这是定位-定位-定位-的按钮点击事件');});</script>
</body></html>

结果如下所示
在这里插入图片描述
在这里插入图片描述

若两个div同级也就是兄弟级

若两个div同级也就是兄弟级,一个设置了pointer-events: none,并不影响另外一个div的点击事件,另一个div可以是定位的也可以是非定位的。都不影响div的点击事件,因为是兄弟级别的。所以不影响,具体看下面代码的child1、child2、child3是兄弟级别的,其中child1设置了pointer-events: none,child2、child3什么都没有设置。具体代码如下所示:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>pointer-events: none;</title><style>.parent {width: 800px;height: 600px;background-color: rgba(44, 245, 228, 0.829);position: relative;display: flex;justify-content: center;align-items: center;}.child1 {pointer-events: none;}.child2 {position: absolute;top: 0;left: 0;}.child3 {margin-left: 24px;}</style>
</head><body><div class="parent"><button class="child1" id="buttonClick">child1-child1-按钮点击事件</button><div class="child2"><button id="divButton">child2-child2-按钮点击事件</button></div><div class="child3"><button id="divButton3">child3-child-3-按钮点击事件</button></div></div></div><script>document.querySelector('#buttonClick').addEventListener('click', function () {alert('点击了父元素里面的按钮!!!');});document.querySelector('#divButton').addEventListener('click', function () {alert('这是child2-child2-child2-的按钮点击事件');});document.querySelector('#divButton3').addEventListener('click', function () {alert('这是child3-child3-child3-的按钮点击事件');});</script>
</body></html>

结果如下所示:
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Vue:计算属性

Vue&#xff1a;计算属性 计算属性getset 在模板中&#xff0c;有时候填入的值要依赖于多个属性计算得出。 例如使用姓和名拼出全名&#xff1a; 以上效果可以通过以下代码实现&#xff1a; <div id"root">姓&#xff1a;<input type"text" v-m…

就业市场变革:AI时代,我们将如何评估人才?

内容概要 在这个充满变革的时代&#xff0c;就业市场正被人工智能&#xff08;AI&#xff09;技术深刻改变。随着技术的进步&#xff0c;传统的人才评估方式逐渐显示出其局限性。例如&#xff0c;过去依赖于纸质简历和面试评估的方式在快速变化的环境中难以准确识别真实的人才…

网站504错误出现的原因以及如何修复

504网关超时错误意味着上游服务器未能在规定时间内完成请求&#xff0c;导致无法传递网站内容。当您访问某个网站时&#xff0c;浏览器会向该网站的服务器发出请求。如果请求处理成功&#xff0c;服务器会返回200 OK状态码&#xff1b;但如果服务器响应超时&#xff0c;浏览器可…

学习RocketMQ(记录了个人艰难学习RocketMQ的笔记)

目录 一、部署单点RocketMQ 二、原理篇 三、实操篇 1、引入依赖 2、启动自动装配 3、配置application.yml 4、启动类 5、编写一个统一格式的消息对象 6、生产者 ​编辑 7、定义一个constant 8、多/单个消费者订阅一个主题 1.实现消费者 2.编写接口发送消息 3.接口…

安全关键型嵌入式系统设计模式整理及应用实例

本文提供了对安全关键型嵌入式系统设计模式的全面概述&#xff0c;这些模式旨在提高系统在面临潜在故障时的安全性和可靠性。文中详细介绍了15种设计模式&#xff0c;包括同质冗余&#xff08;HmD&#xff09;、异质冗余&#xff08;HtD&#xff09;、三模冗余&#xff08;TMR&…

京东零售推荐系统可解释能力详解

作者&#xff1a;智能平台 张颖 本文导读 本文将介绍可解释能力在京东零售推荐系统中的应用实践。主要内容包括以下几大部分&#xff1a;推荐系统可解释定义、系统架构、排序可解释、模型可解释、流量可解释。 推荐系统可解释定义 推荐系统可解释的核心包括三部分&#xff0…

java项目之校园周边美食探索及分享平台(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的校园周边美食探索及分享平台。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 校园周边美食…

stack和queue --->容器适配器

不支持迭代器&#xff0c;迭代器无法满足他们的性质 边出边判断 实现 #define _CRT_SECURE_NO_WARNINGS 1 #include<iostream> #include<stack> #include<queue> using namespace std; int main() {stack<int> st;st.push(1);st.push(2);st.push(3);…

vue3动态监听div高度案例

案例场景 场景描述&#xff1a;现在左边的线条长度需要根据右边盒子的高度进行动态变化 实践代码案例 HTML部分 <div v-for"(device, index) in devices" :key"index"><!-- 动态设置 .left-bar 的高度 --><div class"left-bar"…

华为OD机试真题(Python/JS/C/C++)- 考点 - 细节

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。

Spring源码学习(五):Spring AOP

免责声明 本人还处于学习阶段&#xff0c;如果内容有错误麻烦指出&#xff0c;敬请见谅&#xff01;&#xff01;&#xff01;Demo <dependency><groupId>org.aspectj</groupId><artifactId>aspectjweaver</artifactId><version>1.8.8<…

vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中&#xff0c;需要使用到此功能&#xff0c;就是替换合同模板内的一些字符串&#xff0c;如&#xff1a;甲乙方名称&#xff0c;金额日期等&#xff0c;合同内容不变。效果如下&#xff1a; 使用docx-preview 好处是只预览不可编辑内容。 前端vue import { re…

若依项目搭建

若依的大版本 基本环境搭建 搭建注意点

(11)(2.1.6) Hobbywing DroneCAN ESC(二)

文章目录 前言 2 配置ESC 3 测试 4 设置视频 5 参数说明 前言 具有 CAN 接口&#xff08;including these&#xff09;的业余 ESC 支持 DroneCAN&#xff0c;它允许自动驾驶仪通过 CAN 控制 ESC /电机&#xff0c;并检索单个转速、电压、电流和温度。 2 配置ESC 默认情…

JVM结构图

JVM&#xff08;Java虚拟机&#xff09;是Java编程语言的核心组件之一&#xff0c;负责将Java字节码翻译成机器码并执行。JVM由多个子系统组成&#xff0c;包括类加载子系统、运行时数据区、执行引擎、Java本地接口和本地方法库。 类加载子系统&#xff08;Class Loading Subsy…

【智能算法改进】混沌映射策略--一网打尽

摘要 本文研究了多种混沌映射策略在智能算法中的改进效果&#xff0c;提出了一种综合不同混沌映射策略的多元混合方法&#xff0c;以提高算法的全局优化能力和收敛速度。通过引入不同的混沌映射&#xff08;如 Logistic、Tent、Sine 等&#xff09;生成初始种群分布&#xff0…

QML —— QML调用C++两种方法(附完整测试源码)

代码效果 说明 QML 其实是对JavaScript 的扩展,融合了Qt Object 系统,它是一种新的解释型的语言, QML 引擎虽然由Qt C++ 实现,但QML 对象的运行环境,说到底和C++ 对象的上下文环境是不同的,是平行的两个世界。如果你想在QML 中访问C++ 对象,那么必然要找到一种途径来在两…

剧本杀小程序,市场发展下的新机遇

剧本杀作为休闲娱乐的一种游戏方式&#xff0c;在短时间内进入了大众视野中&#xff0c;受到了广泛关注。近几年&#xff0c;剧本杀行业面临着创新挑战&#xff0c;商家需求寻求新的发展机遇&#xff0c;在市场饱和度下降的趋势下&#xff0c;获得市场份额。 随着科技的不断进…

mysql error:1449权限问题 及 用户授权

一、权限问题 Got error: 1449: The user specified as a definer (skip-grants userskip-grants host) does not exist when using LOCK TABLES 在迁移数据库时&#xff0c;定义的definer&#xff0c;在两个数据库之间不同步时&#xff0c;要将不存在的definer改成数据库中已…

Spark 的Standalone集群环境安装与测试

目录 一、Standalone 集群环境安装 &#xff08;一&#xff09;理解 Standalone 集群架构 &#xff08;二&#xff09;Standalone 集群部署 二、打开监控界面 &#xff08;一&#xff09;master监控界面 &#xff08;二&#xff09;日志服务监控界面 三、集群的测试 &a…