添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件

给绝对定位的层多加一个样式：" pointer-events:none; " 这样绝对定位层下的元素就可以点击了
如果在绝对定位层上存在能够点击的元素，在添加" pointer-events:none; " 后将同样不起作用。
为了避免此情况，可以给需要操作的元素设置" pointer-events:auto" 即可

//遮罩层<div class="map-wrapper">//遮罩层按钮等组件<el-button @click="pic" style=" pointer-events:auto">画图</el-button></div>//遮罩层下方内容<div id="yzMap" style="position: absolute; width: 99%; height: 95%"></div>

.map-wrapper {width: 99%;height: 95%;position: absolute;pointer-events: none;/*取消事件,点击穿透*/z-index: 100;background-color: rgba(252, 252, 252, 0.5);
}

添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件相关推荐

用css控制点击穿透
当开发遇到一种场景,比如在一个元素上添加遮罩层,但是点击在遮罩层上时,实际触发下方的元素点击事件,而不是遮罩层可以用css属性 pointer-events 来控制; pointer-events: ...
ue4网页端_ue4之使用WebUI插件实现透明网页点击穿透
先前使用ue4自带的web brower插件嵌入了网页,但是全屏覆盖网页的时候,网页层劫持了鼠标对场景的操作控制. 之前的项目中为了实现这种透明区域可控,同事采用的是在User Interface-- ...
css：css属性pointer-events实现点击穿透
文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events pointer-events CSS 属性指定在什么情况下 (如果 ...
div阻止点击穿透+实现点击穿透
一.阻止点击穿透,上层点击时加上下面这句,阻止事件冒泡到父元素 event.stopPropagation(); 二.点击穿透到下面一层,不点击上层,为上层添加下面样式代码即可 pointer-eve ...
Redis进阶 - 缓存问题：一致性, 穿击, 穿透, 雪崩, 污染等
Redis最常用的一个场景就是作为缓存,本文主要探讨Redis作为缓存,在实践中可能会有哪些问题?比如一致性, 穿击, 穿透, 雪崩, 污染等. 为什么要理解Redis缓存问题在高并发的业务场景下, ...
html电脑上面点击穿透,click300ms点击问题和点击穿透.html
Document 点我 (function(){ let button = document.querySelector("button"); button.οnclick=fun ...
【前端点击穿透】pointer-events属性详解
什么是pointer-events? pointer-events 属性是一个指针属性,是用于控制在什么条件下特定的图形元素可以成为指针事件的目标. This CSS property,when se ...
限制按钮点击_Android | 使用 AspectJ 限制按钮快速点击
前言在Android开发中,限制按钮快速点击(按钮防抖)是一个常见的需求: 在这篇文章里,我将介绍一种使用AspectJ的方法,基于注解处理器 & 运行时注解反射的原理.如果能帮上忙,请务必 ...
微信公众平台开发之在网页上添加分享到朋友圈，关注微信号等按钮
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
iOS点击获取短信验证码按钮
概述 iOS点击获取短信验证码按钮, 由于 Demo整体测试运行效果 , 整个修改密码界面都已展现, 并附送正则表达式及修改密码逻辑. 详细代码下载:http://www.demodashi.com ...

添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件

添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件相关推荐

最新文章

热门文章