javascript--6点击空白处隐藏>>以遮罩层为例

最新推荐文章于 2023-02-19 16:36:53 发布

w3cgirl

最新推荐文章于 2023-02-19 16:36:53 发布

阅读量773

点赞数

分类专栏： JavaScript 文章标签： javascript 点击空白区域隐藏盒子遮罩层阻止冒泡隐藏滚动条

本文链接：https://blog.csdn.net/sinat_37568115/article/details/59121008

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

点击空白处隐藏

------ 以遮罩层为例

一、效果：

一个盒子，点击除了自己以外的任何一个地方，就会隐藏。

1.点击注册，显示遮罩层和登陆界面，滚动条消失

2.点击空白区域，隐藏遮罩和登陆界面

3.点击登陆界面，界面不动

二、body +css

三、js部分

思路：1.点击空白区域，事件源：document，点击注册，事件源login ，login 隶属于document的一部分，需阻止冒泡

2.核心>>>>点击除了自己以外的地方，隐藏 最主要找到自己，判断当前对象，如何判断点的地方是不是自己，判断当前对象用event.target.id(普通浏览器)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

w3cgirl

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js多种方法实现点击空白处关闭面板

qq_37976966的博客

07-05

2770

1. v-click-outside 作用：当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法 Install npm install --save v-click-outside Use import vClickOutside from 'v-click-outside' Vue.use(vClickOutside) <template> <p v-click-out...

angularJs模态框点击空白不隐藏

bing_JavaScript的博客

05-24

5495

view界面： aria-hidden="true" ng-click="cancel()">× 商户详细信息324534563 商户名称:{{object.busiName}} 商户编码:{{object.busiCode}} 商户状态:{{object.status}}

参与评论您还未登录，请先登录后发表或查看评论

js点击遮罩层内容以外的地方隐藏遮罩

肖肖肖丽珠的博客

05-22

408

combatBoxc内容区域 combatBox整个遮罩层最外面的div <div class="combatBox" style="display: block;"> <div class="combatBoxct"> <p class="allCombat"><i class="fontcolor">总战斗值:</i><i class="fontcolor" data-...

js隐藏遮罩层

如鹿渴慕泉水的专栏

06-17

593

function showShelter() { $(".box_big").show(); setTimeout(function () { $(document).off("click").on("click", function (e) { if ($(".box_big").is(":visible")) { var tar = e.target ? e....

js实现点击空白处隐藏

weixin_34255793的博客

05-07

1141

部分业务要求除了某元素外点击其他对象，对应的元素隐藏，下面是一个demo效果， <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style type="text/css">...

JS-点击除了自己别的地方隐藏

buzhidjiaosha的博客

05-16

596

$(".xlBtn").on(“click”,function(e){ $(".xlBox").show() e.stopPropagation(); $(“body”).one(“click”,function(e){ $(".xlBox").hide() }); });

点击空白处隐藏盒子

weixin_30896511的博客

07-12

269

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击空白处隐藏盒子</title> <style> #mask{ width: 100%; height...

jQuery实现点击弹出背景变暗遮罩效果实例代码

10-22

同时，通过监听 `body` 元素的点击事件，我们可以检测是否点击了非 `.tkyy_con` 区域，如果点击了，则隐藏遮罩层。接下来是 CSS 部分： ```css .marsk-container { background: #FFFFFF; display: none; ...

vue点击空白处弹出框取消

04-22

当点击空白处或取消按钮时，我们需要将 `showModal` 设为 `false`，即隐藏弹出框。当点击确定按钮时，执行 `confirm` 方法。接下来，在 Vue 的实例中定义相关的数据和方法： ```JavaScript data: { showModal: ...

el-image图片放大后的关闭事件

nick_zhang的博客

02-19

1606

我们知道el-image的放大是由单独的el-image-viewer组件构成，那么这个组件的方法怎么在el-image中的调用呢，看到源码中有个关闭时的回调函数closeViewer，里面是通过showViewer来控制图片放大的显示与隐藏，那么我们只需要监听子组件的showViewer来做对应的事情即可。那么就换种思路，既然最后是点击那么就监听dom的点击事件吧，只要是关闭按钮以及蒙层都做对应的事情即可。但事与愿违，此种监听子组件的方法存在问题，所以先放弃。

JS+CSS简单实现DIV遮罩层显示隐藏

weixin_34288121的博客

02-14

105

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><...

jq点击空白处阻止冒泡隐藏某个标签

九亿宅男的梦的博客

08-19

385

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> &lt...

点击遮罩层内容区域以外的区域，关闭遮罩层

空&白的博客

07-22

1923

html <div class="div1"> <dl class="div2"> 内容... </dl> </div> css .div1{ position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.3); z-index: ...

点击遮罩层内容以外的区域关闭遮罩层

于离别之朝束起约定之花的博客

09-24

2077

最近的一个项目，设计稿上有个地方是弹出层，但是没有看见关闭按钮或者关闭图片，这让我很疑惑，这要怎么关闭？用户体验不会变差么？但想了想无所谓了，大不了以后再改，加个按钮或者图片点击隐藏而已，于是我就按着设计稿上的做了，今天特地分享出来（默认样式因为是单独一个css文件，太长，就用 * 强制清除默认样式了，但是推荐不这样用，至于为什么可以百度）。接下来贴代码，首先是css的： * { ...

js实现点击空白部分隐藏div

chengjianghao的博客

08-31

1116

实现思路：可以将一个最外面的div绑定一个点击事件样式设置成宽度100% 高度也是100% 颜色可以弄成透明或者不设置颜色这样点击哪里 JS都可以获取到事件拿侧边栏举例点击侧边栏展开点击空白处隐藏这个时候就可以把整个屏幕都设置成一个div 为一个div绑定事件。 ...

遮罩层点击空余部分隐藏

weixin_43993766的博客

01-10

543

工作中经常会有很多显示隐藏，点击x号就隐藏遮罩层。（实现点击空余部分也可以点击隐藏）如图为例：1.给遮罩设置点击就隐藏, 2.给这招内容区域设置用event.preventDefault()，取消事件的默认动作。用event.stopPropagation()停止事件的传播。 js ...

vue 手写点击 div盒子外面空白区域控制隐藏

m0_60602436的博客

11-05

1052

需求：需要写一个类似于elment-ui中 el-dialog的弹出框，点击弹出框外部任意一个位置，都能关闭弹出框的效果。右下角的圆形按钮，控制左边的全部功能盒子的显示隐藏，要求：点击全部功能盒子以外的任意地方，都能实现隐藏该盒子。结构部分：代码部分：监听事件： watch: { showFlag(newVal, oldVal) { if (newVal) { // 若显示，则监听失去焦点事件。 document.ad..

点击遮罩层没有内容的地方进行隐藏

liuian1946的博客

03-13

6306

在项目中遇到的问题，因为是手机端的遮罩层，为了给用户更好的体验，需要在遮罩层中点击没有内容的地方讲遮罩层进行隐藏这个主要用的知识点是事件的冒泡和捕获事件的冒泡：是从里向外，DOM的层次像冒泡一样，不断的向上一级上升事件的捕获：是从外向里注意：1.ie只有事件的冒泡没有事件的捕获 2，事件的捕获会先发生例子： .popup

微信小程序使用<page-container>遮罩层，遮罩层显示时，点击空白区域怎么也关闭了遮罩层，请问怎么解决