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

最新推荐文章于 2023-06-30 09:54:35 发布
最新推荐文章于 2023-06-30 09:54:35 发布
阅读量987 收藏 4
点赞数 1
分类专栏： H5混合开发 Vue.js 2学习笔记 文章标签： css3 html 前端
版权声明：本文为博主原创文章，遵循 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
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
z-index为负值的元素无法点击到的解决方法
09-22
主要介绍了z-index为负值的元素无法点击到的解决方法,需要的朋友可以参考下
javascript 动态改变层的Z-INDEX的代码style.zIndex
01-21
这种操作常见于需要在用户交互如鼠标点击、滚动事件等发生时，改变元素层级以响应用户的操作。 描述中提到的“链接1 链接1”和“[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]”表明了这个操作可能涉及到某些外部...
解决z-index，导致高层级div的鼠标事件无效
weixin_40667613的博客
04-10 822
需求： 这2块元素都有鼠标移入事件；当经过两块元素交集处，则层级高德移入事件会被层级低的移入事件覆盖；导致，层级高的移入事件无效； 期望： 层级高的鼠标移入事件等级高于层级低的鼠标移入事件； 做法： 为被遮挡元素上层使用z-index属性的元素添加以下样式： pointer-events: none; ...
被z-index遮盖后的点击事件无法触发
lingdian1614114082的博客
12-07 1620
遇到一个问题，一张图片覆盖在了按钮上面，点击按钮无法触发绑定的事件。设置了zindex后也没有效果。 可以在遮盖层设置css: pointer-events: none; 默认值是auto、 设置后就被遮盖的按钮点击时就能正常触发了。 ...
javaScript tips —— z-index 对事件机制的影响
weixin_30567225的博客
12-14 371
demo // DOM结构 class App extends React.Component { componentDidMount() { const div1 = document.getElementById('div1'); const div2 = document.getElementById('div2'); const div...
z-index上层元素遮挡下层元素点击事件解决
weixin_39667153的博客
06-30 533
有一个地图页面，地图上面添加了div样式z-index:1遮盖了地图z-index:0，导致此部分地图无法实现拖拽和缩放。
maxZIndex:用于确定 DOM 中最高 z-index 的 jQuery 插件
06-24
但原生的 JavaScript API 并不提供直接获取最高 z-index 的功能，这正是 `maxZIndex` 插件的价值所在。它简化了这个过程，使得开发者可以快速有效地解决页面上的层级问题。 使用这个插件的方法很简单。首先，你需要...
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
08-31
可以通过CSS来调整模态层的堆叠顺序，让上层的modal位于z-index更高的位置，这样它的输入框就能获取到焦点了。但是这种方法可能会影响到其他交互，需谨慎使用。 4. **利用事件监听**： 使用JavaScript监听modal的...
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
10-17
总之，面对textarea层级过高问题，开发者需要灵活运用组件切换、条件渲染等技术手段来规避这一问题，确保用户体验不受影响。同时，保持对微信小程序官方文档的跟踪更新，以便及时掌握可能的解决方案和新功能。
解决Extjs下拉框不显示的问题
10-19
解决ExtJS中ComboBox下拉框不显示的问题，通常需要从组件渲染、Z-Index管理、父容器影响以及事件处理等多个角度进行排查。通过监听组件事件并动态调整样式，可以有效地避免因层叠顺序问题导致的显示异常。同时，良好...
阻止上层div触发点击事件，并触发下层div的点击事件
nayi_224的博客
12-19 5746
<!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 1753
这是我最近在开发中遇到的问题，网上也查看了资料，有说，因为点击的，不是当前元素，给元素（设onClike事件的元素）设置z-index，就可以解决，有基础的都知道，数值越大层级越高。 可是，我设置了没有效果，看了很多示例，也没有我这样的情况， ...
寻找（获取）当前页面中最大的 z-index 值的方法(js组件层级计数器)
spark-chen的博客
08-15 2059
思路：我们可以把DOM中的所有元素集合起来，然后转化成一个数组，然后我们遍历这个数组，把所有元素的z-index值提取出来，然后就形成了一个纯数字的数组，最后从中取到最大值，就是当前页面中的最大的z-index值了。 将我们的思路，转化为代码 1.找到所有元素，转化成数组 (下面方法都可以) Array.from(document.querySelectorAll('body ...
pointer-events 穿透 适用于 高z-index 点击低z-index的事件
csstmg的博客
09-02 1133
pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events 图标的维度高于要点击维度 就用pointer-events ...
z-index导致mouseup失效的问题
qq_39670012的博客
08-05 435
知道问题就好解决了，只要在button的mouseup事件处理函数里，判一下那个变量是否为null，是的话赋个初值即可。 3.知其然，知其所以然 如果为了应付工作，做到上面已经足够了。但是作为一个有追求的程序员，这里肯定是要知道为什么button的mousedown事件没有被触发。因此，下面一起重温一下与此有关的z-index和event bubbling（事件冒泡）知识吧！ 先轮到z-index出场。根据MDN上的资料[1]，满足下述任一条件的DOM元素，都会在它们的所在位置形成一个”stacking c
上层元素挡住下层元素事件的解决方法
又菜又爱玩
11-21 1899
上层元素挡住下层元素事件的解决方法： 当出现一个元素上面还定位上其他元素的时候，底层元素的点击事件，滑动事件会被上层元素挡住。 #解决办法 ： 给上层元素加一句css样式 pointer-events:none; ...
上层组件遮挡导致下层组件点击事件不生效
qq_51632935的博客
12-02 1237
上层组件遮挡导致下层组件点击事件不生效
js z-index
最新发布
09-01
JavaScript中的z-index是CSS属性，它用于控制元素在堆叠顺序中的显示层级。z-index值越大，元素就越靠近顶部。在JavaScript中，你可以使用以下方式来设置z-index属性： ```javascript // 设置一个元素的z-index值 document.getElementById("myElement").style.zIndex = "10"; // 获取一个元素的z-index值 var zIndexValue = document.getElementById("myElement").style.zIndex; ``` 上述代码中，你可以将"myElement"替换为你想要操作的元素的ID或引用。然后，你可以使用`style.zIndex`来设置或获取该元素的z-index值。 需要注意的是，只有定位属性（如position: relative、position: absolute或position: fixed）的元素才会受到z-index属性的影响。对于没有定位属性的元素，z-index属性将不起作用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值