解决z-index层级高的不能获取点击事件的问题

最新推荐文章于 2023-06-30 09:54:35 发布
最新推荐文章于 2023-06-30 09:54:35 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： H5混合开发 Vue.js 2学习笔记 文章标签： z-index pointer-events 点击穿透 div层级 解决策略
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uniquemei/article/details/124633784
版权

在项目开发中，利用z-index属性，高层级的覆盖住了低层级的div块，但是高层级的点击时间，一直获取不到，那么怎么解决呢？

.back_month {
  pointer-events: none;//
}

pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!

uniquemei
关注
专栏目录
js添加dom到指定div之后，并给添加的dom类名，然后设置其样式，以及el-popover层级z-index过高问题解决。
qq_37635012的博客
11-15 844
给新元素div添加类名，然后设置样式，通过insertBefore属性方法传参，将其放在指定div之后。思路：通过querySelector获取el-table__header-wrapper元素，通过createElement创建一个div，通过。
小程序 textarea、input 层级过高，导致填写内容穿透，z-index无效问题解决方案。
热门推荐
流沙溪
09-28 1万+
小程序的textare、input输入框层级是最高的 那么我们在textare、input输入的内容就会总是显示在最上一层。 这是时为什么呢？官方文档有说明，因为textare、input这些是原生组件。原生组件的层级是最高的，不管其它非原生组件z-index设置多大，原生组件都无法覆盖在原生组件上。想了很久终于想到个办法，但是并不完美。   思路：textarea输入完成时，将te...
z-index为负值的元素无法点击到的解决方法
09-22
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
解决z-index，导致高层级div的鼠标事件无效
weixin_40667613的博客
04-10 845
需求： 这2块元素都有鼠标移入事件；当经过两块元素交集处，则层级高德移入事件会被层级低的移入事件覆盖；导致，层级高的移入事件无效； 期望： 层级高的鼠标移入事件等级高于层级低的鼠标移入事件； 做法： 为被遮挡元素上层使用z-index属性的元素添加以下样式： pointer-events: none; ...
被z-index遮盖后的点击事件无法触发
lingdian1614114082的博客
12-07 1657
遇到一个问题，一张图片覆盖在了按钮上面，点击按钮无法触发绑定的事件。设置了zindex后也没有效果。 可以在遮盖层设置css: pointer-events: none; 默认值是auto、 设置后就被遮盖的按钮点击时就能正常触发了。 ...
z-index上层元素遮挡下层元素点击事件解决
最新发布
weixin_39667153的博客
06-30 615
有一个地图页面，地图上面添加了div样式z-index:1遮盖了地图z-index:0，导致此部分地图无法实现拖拽和缩放。
javascript 动态改变层的Z-INDEX的代码style.zIndex
01-21
这种操作常见于需要在用户交互如鼠标点击、滚动事件等发生时，改变元素层级以响应用户的操作。 描述中提到的“链接1 链接1”和“[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]”表明了这个操作可能涉及到某些外部...
jQuery插件TopZIndex: 动态管理z-index层级
z-index 属性控制着元素在页面上的层叠顺序，即元素在垂直方向上的堆叠顺序，具有更高 z-index 值的元素会覆盖具有较低 z-index 值的元素。TopZIndex 插件的主要功能有两个方面： 1. 计算当前文档或指定元素集合中...
maxZIndex:用于确定 DOM 中最高 z-index 的 jQuery 插件
06-24
但原生的 JavaScript API 并不提供直接获取最高 z-index 的功能，这正是 `maxZIndex` 插件的价值所在。它简化了这个过程，使得开发者可以快速有效地解决页面上的层级问题。 使用这个插件的方法很简单。首先，你需要...
解决因为z-index层级的原因导致无法触发下层鼠标事件
m0_46627730的博客
09-23 4066
前言 最近在做一个拖动的组件，其中一个就是拖动tag到一个div折叠面板内会自动打开div折叠面板。虽然通过设置z-index可以很简单实现这个效果，但却遇到问题了。 接下来我就说一下实现的探索过程吧： 1：tag设置z-index为-1 虽然tag设置z-index为-1时可以很容易触发鼠标移动到div折叠面板上的onmouseover事件从而打开折叠面板，但如果页面高度较大，有滚动，这时拖动tag到滚动后出现的页面会被隐藏，这显然不是我们想要看到的。 2：不设置tag的层级 这时虽然在滚动页面部分可以
javaScript tips —— z-index 对事件机制的影响
weixin_30567225的博客
12-14 384
demo // DOM结构 class App extends React.Component { componentDidMount() { const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); const div...
阻止上层div触发点击事件，并触发下层div的点击事件
nayi_224的博客
12-19 5931
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div onclick="aa(1);" style="width: 200px;height: 20...
react绝对定位导致onClick点击事件不生效，设置了z-index也无效
qq_58240375的博客
05-29 1848
这是我最近在开发中遇到的问题，网上也查看了资料，有说，因为点击的，不是当前元素，给元素（设onClike事件的元素）设置z-index，就可以解决，有基础的都知道，数值越大层级越高。 可是，我设置了没有效果，看了很多示例，也没有我这样的情况， ...
寻找（获取）当前页面中最大的 z-index 值的方法(js组件层级计数器)
spark-chen的博客
08-15 2130
思路：我们可以把DOM中的所有元素集合起来，然后转化成一个数组，然后我们遍历这个数组，把所有元素的z-index值提取出来，然后就形成了一个纯数字的数组，最后从中取到最大值，就是当前页面中的最大的z-index值了。 将我们的思路，转化为代码 1.找到所有元素，转化成数组 (下面方法都可以) Array.from(document.querySelectorAll('body ...
pointer-events 穿透 适用于 高z-index 点击低z-index的事件
csstmg的博客
09-02 1172
pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events 图标的维度高于要点击维度 就用pointer-events ...
z-index导致mouseup失效的问题
qq_39670012的博客
08-05 456
知道问题就好解决了，只要在button的mouseup事件处理函数里，判一下那个变量是否为null，是的话赋个初值即可。 3.知其然，知其所以然 如果为了应付工作，做到上面已经足够了。但是作为一个有追求的程序员，这里肯定是要知道为什么button的mousedown事件没有被触发。因此，下面一起重温一下与此有关的z-index和event bubbling（事件冒泡）知识吧！ 先轮到z-index出场。根据MDN上的资料[1]，满足下述任一条件的DOM元素，都会在它们的所在位置形成一个”stacking c
上层元素挡住下层元素事件的解决方法
又菜又爱玩
11-21 1950
上层元素挡住下层元素事件的解决方法： 当出现一个元素上面还定位上其他元素的时候，底层元素的点击事件，滑动事件会被上层元素挡住。 #解决办法 ： 给上层元素加一句css样式 pointer-events:none; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值