点击其它地方关闭DIV

最新推荐文章于 2022-10-28 16:09:27 发布
最新推荐文章于 2022-10-28 16:09:27 发布
阅读量750 收藏
点赞数
分类专栏： 向上冒泡 js

from:http://www.cnblogs.com/mofish/archive/2011/10/21/2220400.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击其它地方关闭DIV</title>
</head>

<body>
<input type="text" value=""  id="tf"/>
<div style="width:400px; height:200px;border:1px solid #000;display:none" id="con">
  <p>1111</p>
  <p><span>2222</span></p>
  <p><a href="#">3333</a></p>
</div>
<script>
    function e(obj){return document.getElementById(obj)}
    e('tf').οnclick=function(event){
        e('con').style.display='block';
        stopBubble(event); 
        document.οnclick=function(){
            e('con').style.display='none';
　　　　　　　document.οnclick=null;　
        }
    }
    
    e('con').οnclick=function(event){
        //只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数
        stopBubble(event); 
    }
    //阻止冒泡函数
    function stopBubble(e){   
        if(e && e.stopPropagation){
            e.stopPropagation();    //w3c
        }else{
            window.event.cancelBubble=true; //IE
        }
    }
</script>
</body>
</html>


Zoe_Wang_ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript点击其他任意地方隐藏关闭DIV实例
10-22
主要分享一个Javascript点击其他任意地方隐藏关闭DIV实例,需要的朋友可以参考下。
点击一个div其他地方关闭这个div并且不使这个div失效
weixin_30537451的博客
02-12 531
首先我们需要知道，页面的遍历是通过标签冒泡遍历的，如果说我们有一个页面body，里面有一个标签div 使这个div在点击其他地方关闭，但是点击这个div内部关闭。这时候我们经常会用到一个叫做停止事件，代码如下： function stopPropagation(e) { if (e.stopPropagation) e.stopPropag...
js使点击网页其他地方使显示框消失
jamesleel的专栏
11-30 2069
有时候我们需要实现这样一个效果： 点击图标或者按钮会出现一个下拉框或者显示框，点击图标或者按钮显示框消失，或者需要点击网页其他任意地方显示框消失。 点击固定图标或按钮显示框显示或消失这个jQuery或者js就能很容易实现，这里说下点击网页其他任意地方显示框消失。 jQuery代码： jQuery("body").click(function(e){ e = e
HTML关闭布局西部区域,jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】...
weixin_39787606的博客
06-26 87
本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考，具体如下：原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》，小编顺便对原文区域外点击bug进行了修改，具体代码如下：www.jb51.net jQuery点击关闭弹出层.area{width:100%;height:100%;position:fixed;z-index:1;}.hide{d...
vue 点击其他区域关闭自定义div操作
10-15
在Vue.js应用中，有时我们需要实现一种功能，即当用户点击页面上的某个自定义div后，该div显示，而当用户点击除这个div之外的任何其他区域时，该div消失。这种需求通常出现在下拉菜单、弹出框或提示信息等组件中。...
点击页面其它地方隐藏该div的两种思路
09-04
这两种思路都能有效地实现点击页面其他地方隐藏div的功能。选择哪种方式主要取决于个人喜好、项目需求以及对浏览器兼容性的考虑。思路一更注重于阻止事件传播，而思路二则是通过对事件源的检查来实现相同的效果。...
jQuery除指定区域外点击任何地方隐藏DIV功能
11-29
这个功能可以用于创建弹出框、菜单或者提示信息，使得用户在关闭或交互后可以通过点击非指定区域来关闭这些元素。在jQuery中，我们可以使用事件处理和DOM遍历来轻松实现这个功能。 首先，让我们详细解析标题和描述...
HTML 点击空白处关闭对话框的另类实现（blur）
japlus的博客
10-16 937
div 增加属性tabIndex 使div能响应focus和blur事件
JavaScript---点击div遮罩层，关闭div
JamieCheung的专栏
05-02 3829
id="productDetailDiv"，是带遮罩的大div，id="addprodtocar"，是不带遮罩的div// 点击div框外，关闭div $('#productDetailDiv').click(function(event) { $('#productDetailDiv').hide(); }); $("#addprodtocar").click(function() { ...
原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效
11-10
原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效 原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效 原生js代码点击文字或小图弹出层_点按钮关闭弹出层特效
点击弹出div层带遮罩可拖动和关闭层
博茨瓦纳的狮王
08-11 1982
这个以前发布的一款js弹出层基础进行升级带遮罩效果并且可以拖曳拖动，也可以关闭弹出层  http://www.niutw.com/view/147.html  1. [图片] 效果图     2. [代码]代码     跳至 [2] [全屏预览] ? 1 2 3 4 5 6 7 8
如何点击一个div盒子之外的部分，使这个div盒子关闭
qq_44705916的博客
10-28 2238
【代码】如何点击一个div盒子之外的部分，使这个div盒子关闭。
js点击空白无效区域关闭弹窗
Moreisy的小镇
03-12 1274
弹出弹窗后，点击非活动区域关闭弹窗 一般的场景是弹出一个全屏的遮罩，中间有我们的弹窗内容，点击无效区域可关闭 HTML的结构如下 <!-- mask为全屏遮罩，popup为弹窗部分 --> <div class="mask" v-show="msgShow" @click="invalid($event)"> <div class="popup"> 弹窗内容 </div> </div> JS如下
JS点击其它地方关闭DIV
m0_47395232的博客
06-09 1011
JSP代码： <div id="img" class="img" onclick="show(event,'add_img');"> </div> <div id="add_img" onclick="show(event,'add_img');" > <div onclick="hide('add_img')" ></div> </div> JS代码块： <script type="text/javas
js实现点击div隐藏相应部分，再次点击显示
热门推荐
csdn_zsdf的博客
08-04 2万+
首先看一下html和css的结构：<style> #nav_left{ width:120px; height:600px; background-color:#333; margin-left:0px; } .list { color:#fff; padding:10px; font-size:18px; }.list:hover{
js 点击除div外的关闭div
sunlizhen的专栏
11-28 1620
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="http://cd...
点击除div本身之外的任意地方，关闭弹框
weixin_42988734的博客
08-17 1万+
因项目需要，要做一个聊天框，点击一个指定div，弹出表情弹框，点击除指定div和弹框本身的任意地方，关闭表情弹框。 点击除图片中表情按钮和弹框本身的任意地方，关闭表情弹框 &lt;!-- 表情按钮--&gt; &lt;li id="btn" type="2"&gt;&lt;/li&gt; &lt;!-- 表情弹框--&gt; &lt;div id=&quo
原生js关闭窗口
hellogril前端库
01-03 494
if (navigator.userAgent.indexOf("MSIE") &amp;gt; 0) { if (navigator.userAgent.indexOf("MSIE 6.0") &amp;gt; 0) { window.opener = null; ...
vue 点击其他地方关闭下拉框
最新发布
07-11
你可以通过在 Vue 中使用事件监听来实现点击其他地方关闭下拉框的功能。具体步骤如下： 1. 在下拉框的组件中，添加一个 data 属性，用于标记下拉框的显示状态，比如 `isDropdownOpen`，初始值为 `false`。 2. 在下拉框组件的外层元素上添加一个 click 事件监听器，用来捕获点击事件。 3. 在点击事件处理函数中，判断点击事件的目标元素是否是下拉框本身或其内部元素，如果是，则不执行任何操作；如果不是，则将 `isDropdownOpen` 设置为 `false`，关闭下拉框。 4. 在下拉框组件的模板中，使用 `v-show` 或 `v-if` 根据 `isDropdownOpen` 的值来控制下拉框的显示与隐藏。 以下是一个示例代码： ```vue <template> <div ref="dropdown" @click="handleClickOutside"> <!-- 下拉框内容 --> </div> </template> <script> export default { data() { return { isDropdownOpen: false }; }, methods: { handleClickOutside(event) { if (!this.$refs.dropdown.contains(event.target)) { this.isDropdownOpen = false; } } } }; </script> ``` 在上述示例中，通过 `ref="dropdown"` 给下拉框的外层元素添加了一个引用，在点击事件处理函数中使用 `this.$refs.dropdown.contains(event.target)` 来判断点击事件的目标元素是否在下拉框内。如果不在，则将 `isDropdownOpen` 设置为 `false`，关闭下拉框。 你可以根据实际情况调整代码，比如在点击其他地方关闭下拉框时，可能还需要处理其他逻辑，比如清除选中的值等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值