js 禁止冒泡 点击页面空白处,隐藏特定的div

最新推荐文章于 2023-08-04 10:56:12 发布
最新推荐文章于 2023-08-04 10:56:12 发布
阅读量3.3k 收藏 2
点赞数 1
分类专栏： JavaScript 文章标签： js html 冒泡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jp571534020/article/details/43270271
版权 
<!doctype html>
<html>
    <head>
        <title>demo</title>
        <style type="text/css">
            .main { position:relative}
            #btn { border:none;cursor:pointer;background:#ccc }
            .layer { position:absolute;height:30px;width:50px;background:#4cff00;display:none }
        </style>
        <script>
            window.onload = function () {
                function stopPropagation(e) {
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    } else {
                        e.cancelBubble = false;
                    }
                }
                var btn = document.getElementById("btn");
                var layer = document.getElementById("layer");
                btn.onclick = function (e) {
                   
                    layer.style.display = "block";
                    layer.style.left = "10px";
                    layer.style.top = "50px";
                    stopPropagation(e);
                    
                 
                }
                window.onclick = function (e) {
                    layer.style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <div class="main">
            <input  id="btn" type="button" value="点击"/>
            <div class="layer" id="layer">

            </div>
        </div>
    </body>
</html>

super晴天
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
双击页面任意空白处返回顶部JS代码
07-17 330
在所有页面空白处双击左键，自动返回网页顶部。
【js】点击空白地方 弹框消失隐藏
jieweiwujie的博客
03-15 1716
写了一个弹框 点击空白地方想让它消失 searchFlag 控制显示和隐藏 addEventListenerFun() { document.addEventListener('mouseup', (e) => { let divSearch = document.querySelector('.position-form-item') //选择返回的第一个出现的元素 debugger; if (divSea..
js实现模态框点击空白关闭
qq_42535651的博客
01-31 1384
面试的时候被问到了，这个问题我在网上一直没搜索到。不过bootstrap已经实现了。 在学习js事件委托的时候。想到可以解决这个问题。 在document添加点击监听，利用事件的捕获和冒泡，界面上的点击事件最终都会响应到document上，通过event e的target属性来判断是否点击的是模态框，如果不是的话就隐藏。 <script> let modal = docum...
【JS】JavaScript实现点击自定义区域空白处隐藏div
最新发布
owo_ovo的博客
08-04 1075
JavaScript实现点击自定义区域空白处即可隐藏指定div
原生 js点击空白处 关闭遮罩层（关闭某个div）
weixin_58437310的博客
07-03 925
如图所示 点击空白处关闭此div。
vue&javascript点击空白处隐藏内容
qq_41585169的博客
06-25 427
点击按钮，盒子显示，点击页面任何一个地方，盒子隐藏（阻止事件的冒泡，原生js）1.创建一个按钮和容器，按钮控制显示和隐藏，容器存放内容。
点击页面其它地方隐藏该div的两种思路
09-04
在网页开发中，有时我们需要实现一个功能：当用户点击页面上的某个特定div之外的其他区域时，该div会自动隐藏。这种效果可以用于创建可关闭的提示框、下拉菜单等交互元素。本文将探讨两种实现这一功能的思路。 思路...
vue点击页面空白处实现保存功能
10-16
在Vue开发过程中，有时我们需要实现特定的交互效果，例如点击页面空白处实现保存功能。这个功能常见于编辑表格等场景，允许用户双击表格行进行编辑，然后在点击其他非编辑区域时自动保存更改。以下将详细介绍如何在...
点击页面任何位置隐藏div的实现方法
09-01
通过这种方式，我们可以实现一个优雅的交互效果，当用户点击页面任何位置时，指定的div元素会自动隐藏，而点击特定按钮时可以重新显示。这个功能在提升用户体验方面非常有用，特别是在移动设备上，可以节省屏幕空间...
js利用事件的阻止冒泡实现点击空白模态框的隐藏
12-08
很多时候，我们做前端的时候都会有这样的小功能，点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框。假设如下场景，一个小按钮，点击可以弹出一个模态框。 就这么简单，但是我们想要点击...
js实现的点击div区域外隐藏div区域
10-25
主要介绍了通过js实现点击div区域外隐藏div区域，原理及示例代码如下
空白处点击关闭DIV层
04-14
NULL 博文链接：https://empirel.iteye.com/blog/1748526
jq点击空白处阻止冒泡隐藏某个标签
九亿宅男的梦的博客
08-19 367
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.min.js"></script> &lt...
js点击空白处触发事件
qq_45587146的博客
04-20 986
js点击某一块内容之外的地方触发事件
菜鸟【原生js】：点击页面空白区域，实现窗口关闭
huangfengnt的博客
10-16 2655
网上实现这个效果，有使用阻止冒泡或者使用遮罩层的，这里就不细说，但我菜，有时候我看不懂，所以自己写了一个方法，有更好的方法，欢迎指导。 首先是html部分，基本上就是导航栏中有一个搜索框，点击搜索框会出现一个推荐窗口 <div class="nav-bar"> <div class="search"> <input type="text" placeholder="请输入"> <div class
jQuery点击空白处隐藏弹出层
热门推荐
爬虫 的博客
11-23 1万+
一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码：   CSS代码: * { padding: 0; margin: 0; } #btnShow{ margin:
js实现点击空白处 触发事件
Future1994的博客
07-18 8342
样例分析： https://www.cnblogs.com/jassibel/p/9548369.html
点击空白区域，div隐藏
startcodingnoend的博客
11-17 1800
当我点击查询条件时，查询条件div显示出来 如下 当我再点击空白区域的时候，查询条件隐藏。 这里面主要是用到一个防止冒泡的功能 $(".rightMenuAlert").click(function(e){ $(".cxtj").animate({right:'0px'},"500"); var ev = e || window.event;                
点击空白处隐藏div方法
anLazyAnt_懒蚂蚁
05-16 3454
一般写法：html<button id="btn">点我显示div</button> <div>我是点击btn后显示的div</div>jQuery// 取消冒泡方法（兼容写法） function cancel_Bubble() { //如果事件对象存在 var event = event || window.event; // w3c的方法
vue实现点击空白处,隐藏div
06-09
可以通过以下方式实现： 1. 在需要隐藏的 `div` 外面包一个父级元素，并且给这个父级元素添加一个点击事件。 ``` <template> <div class="wrapper" @click="hideDiv"> <div class="content" v-show="showDiv">Hello World</div> </div> </template> ``` 2. 在 `data` 中定义一个 `showDiv` 变量，用来控制 `div` 是否显示。 ``` <script> export default { data() { return { showDiv: false } }, methods: { hideDiv() { this.showDiv = false; } } } </script> ``` 3. 在 `content` 的点击事件中，添加 `event.stopPropagation()` 阻止事件冒泡，避免触发父级元素的点击事件。 ``` <script> export default { data() { return { showDiv: false } }, methods: { hideDiv() { this.showDiv = false; }, toggleDiv() { this.showDiv = !this.showDiv; } } } </script> ``` 完整的代码如下： ``` <template> <div class="wrapper" @click="hideDiv"> <div class="content" @click.stop="toggleDiv" v-show="showDiv">Hello World</div> </div> </template> <script> export default { data() { return { showDiv: false } }, methods: { hideDiv() { this.showDiv = false; }, toggleDiv() { this.showDiv = !this.showDiv; } } } </script> ``` 这样，每次点击 `content` 时，会切换 `div` 的显示和隐藏；而点击 `wrapper` 时，会隐藏 `div`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值