DIV设置蒙层，div内部元素不可点击实现方法

最新推荐文章于 2023-06-09 10:27:43 发布
原创 最新推荐文章于 2023-06-09 10:27:43 发布 · 1.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了如何使用CSS属性`pointer-events:none;`解决网页元素在实现模糊效果时仍然可被点击的问题，通过动态绑定外层div来控制蒙层的显示与隐藏。
使用了filter 实现了模糊效果 如下图所示

在这里插入图片描述

但是里面的元素还是处于可点击的状态
解决方式

添加css在外层的div上 动态绑定，蒙层消失则取消css

    pointer-events: none;
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
10-27
最后，该实现代码示例中提到的每个 DIV 内部的表格结构，虽然对于本文的目的不是核心点，但提供了如何将复杂的结构嵌入到可拖拽的 DIV 中的示范。例如，在每个 DIV 内都包含了一个 `<table>` 元素，用于显示信息和...
JS+DIV实现鼠标划过切换层效果的方法
10-24
函数内部首先用一个for循环，遍历所有可切换的DIV元素，并将它们的display属性设置为"none"，即不可见。接着，根据传入的divId参数，找到需要显示的DIV元素，并将其display属性设置为"block"，即可见。这样就实现了...
【css】让div蒙版内的元素不可点击 pointer-events
IU
06-03 902
pointer-events: none; 关于该属性的更多可自行查看以下文章 传送门
解决移动端vue项目当弹出弹窗时，弹窗蒙层下的页面仍然可以滑动问题
kairrys
05-12 1257
问题： 移动端vue项目，当弹窗出现时，弹窗下的蒙层下面的页面仍然可以滑动 解决方案： 在弹窗最外层的div标签上加上 @touchmove.prevent 这样就ok了 ps：安卓机自带浏览器、QQ、微信、企业微信亲测有效(仅供参考) 来个ios的bro说下效果，看下是不是也ok ...
vue-解决弹出蒙层滑动穿透问题
西门吹雪
11-22 8816
vue-解决弹出蒙层滑动穿透问题 遇到的问题】 在一个可滑动列表页弹出一个全屏蒙层，蒙层固定，中间一块显示消息框，当用手滑动蒙层空白处时，滑动事件会穿透到底部列表页，导致列表页的滑动。 【要实现的目标】 1. 滑动蒙层空白处不让滑动事件穿透。 2. 当蒙层消息框文字多时，要让文字可上下滑动。 　 【实现思路】 1. vue提供的 @touchmove.prevent 可以用来阻止滑动，但是这个方法会对其内的子div的滑动事件也禁止掉了，这样会导致中间文字无法滑动。如果没有中间滑动需求，用 @touchmov
div 蒙层
11-19 2469
今日做了一个简单的DIV蒙层的demo   具体如下：        1、js代码           function createIframe(){  //mask遮罩层  var newMask=document.createElement("div");  newMask.id="mDiv";  newMask.style.position="absolut
div元素禁止点击
hum1108的博客
05-10 2833
在没有disabled属性，不能禁用的情况。我们使用css中提供的方法，添加css属性即可解决。 禁止 pointer-events: none; 默认 pointer-events: auto;
鼠标移动div时禁止选中div中的文字的方法
12-13
在网页开发过程中，有时我们需要创建可拖动的`div`元素，例如用于构建交互式界面或自定义控件。然而，在实现这个功能时，可能会遇到一个常见问题：当鼠标移动`div`时，用户可能会意外地选中`div`内的文本内容，这...
js如何设置在iframe框架中指定div不显示
10-26
以下是一些使用JavaScript实现这一功能的方法，以满足在不同上下文中控制`div`可见性的需求。 首先，我们来看一下提供的代码示例。这段HTML和JavaScript代码演示了如何通过检测当前页面是否在`iframe`中来决定`div`...
jquery使整个div区域可以点击的方法
10-24
但是在绑定点击事件之前，需要确保在div内部没有其他元素需要捕捉该事件，否则就会出现事件冒泡的问题。事件冒泡是指一个元素上的事件会向上传递到父级元素上。如果div内部有链接（a标签），点击链接时，默认情况...
简单的div蒙层
weixin_30689307的博客
12-22 157
#hidediv{position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.7;*filter:alpha(opacity=70);z-index:1;display:none;bottom:0;}$("#userLogin").click(fu...
解决上层div遮挡下层div时无法触发click,hover等事件的问题
qq_35703552的博客
01-17 2998
（也就是上面图中的leftAngel和rightAngel俩个元素）设置pointer-events: none;时，就可以触发底层元素的click,hover等事件了。比如这个自定义的漏斗组件，当我们想要为展示不开的数据增加tip提示时发现，下面的元素被上层元素遮挡，导致事件无法透传。
页面添加蒙版，但是不影响页面其他事件响应
xiaonadiandian的专栏
07-15 2047
页面添加蒙版，但是不影响页面其他事件响应，主要是自定义一个控件，方便使用。
满足条件时出现阴影遮罩层禁止点击
yuqingyongqing的博客
06-09 170
利用css样式进行实现。
如何禁止点击蒙板关闭蒙板
guo6na6的博客
02-02 765
bug描述：自定义的蒙版，点击蒙版会自动关闭蒙版 DCloud给出的解决办法是 ：先设置一个外部全局变量，例如：flag = false; 然后创建mask，传入的回调函数中返回flag；代码如下：var flag = false; var mask = mui.createMask(function(){ return flag; });在你需要执行mask.show之前，将fl
最简单的让DIV中的input、a标签等都无法触发点击事件的方法
听胡说
02-09 670
给这个div添加上属性style="pointer-events: none;" jquery的方法: $("div的选择器").css("pointer-events","none");
给div添加遮罩层及处理多张图片空隙问题
L_wade的博客
07-25 1284
一、遮罩层 这里说的遮罩层是给指定的div添加带有提示或者无提示一个蒙层，如图片，视屏的解释语等。 要达到遮罩层效果，需要注意的点就是遮罩层这个div的父级需要相对定位，然后自己需要绝对定位 .warp{ position:relative; margin:200px auto; width:600px; height:600px; } .filter{ ...
div蒙层效果的制作
热门推荐
iceggy的博客
04-13 1万+
在进行网站开发的时候，为了使得网页界面互动性更佳，用户体验效果更好，界面更简单。常常需要我们实现点击某个按钮或者链接，弹出一个带有蒙层的登录效果。这里我采用的是Jquery，也可以简单进行转换为js： 第一步：点击某个链接或者按钮，调用函数弹出div和设置蒙层效果。  [修改密码] 第二步：建弹出框的div         用户帐号：     原 密 码：     新 密
DIV 灰色透明遮罩层，显示，隐藏
ASP.NET
09-13 9305
position: fixed; z-index: 99; display: none;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;">
实现可关闭的点击弹出圆角div遮罩层效果
// 检测点击事件是否发生在遮罩层本身，而不是内部其他元素 if (e.target == mask) { // 关闭遮罩层 mask.style.display = 'none'; } }; ``` 在上述代码中，`<div id="mask">` 是遮罩层本身，它被初始设置为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值