原生js点击其他任意地方隐藏关闭DIV实例

最新推荐文章于 2022-10-28 16:09:27 发布
最新推荐文章于 2022-10-28 16:09:27 发布
阅读量948 收藏 2
点赞数 1
分类专栏： 前端
原文链接：https://www.jb51.net/article/87048.htm
版权 
<!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').onclick=function(event){

    e('con').style.display='block';

    stopBubble(event);

    document.onclick=function(){

      e('con').style.display='none';

　　　　　　　document.onclick=null;　

    }

  }

   

  e('con').onclick=function(event){

    //只阻止了向上冒泡，而没有阻止向下捕获，所以点击con的内部对象时，仍然可以执行这个函数

    stopBubble(event);

  }

  //阻止冒泡函数

  function stopBubble(e){ 

    if(e && e.stopPropagation){

      e.stopPropagation();  //w3c

    }else{

      window.event.cancelBubble=true; //IE

    }

  }

</script>

</body>

</html>

 

https://www.jb51.net/article/87048.htm

简析
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
web前端期末大作业 html+css+javascript环保网页设计实例 企业网站制作
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
web前端 html+css+javascript游戏网页设计实例 (网页制作课作业)
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
点击其它地方关闭DIV
Zoe_Wang_ing的专栏
03-03 743
from:http://www.cnblogs.com/mofish/archive/2011/10/21/2220400.html 点击其它地方关闭DIV 1111 2222 3333 function e(obj){return document.getElementById(obj)} e('tf').onclick=functio
点击关闭 DIV 事件
瑰的博客
09-12 6374
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;关闭DIV&lt;/title&gt; &lt;style type="text/css"&gt; .button-close{ cursor: po
点击弹出div层带遮罩可拖动和关闭层
博茨瓦纳的狮王
08-11 1978
这个以前发布的一款js弹出层基础进行升级带遮罩效果并且可以拖曳拖动，也可以关闭弹出层  http://www.niutw.com/view/147.html  1. [图片] 效果图     2. [代码]代码     跳至 [2] [全屏预览] ? 1 2 3 4 5 6 7 8
按钮操作DIV的打开与关闭（div悬浮于页面之上）
1024我不懂的博客
12-19 4533
按钮操作DIV的打开与关闭（div悬浮于页面之上）
JavaScript---点击div遮罩层，关闭div
JamieCheung的专栏
05-02 3820
id="productDetailDiv"，是带遮罩的大div，id="addprodtocar"，是不带遮罩的div// 点击div框外，关闭div $('#productDetailDiv').click(function(event) { $('#productDetailDiv').hide(); }); $("#addprodtocar").click(function() { ...
web前端实训作业 html+css+javascript 水果超市网页设计实例 企业网站制作
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
web前端期末大作业 html+css+javascript火影忍者网页设计实例 动漫网站制作
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
Javascript点击其他任意地方隐藏关闭DIV实例
10-22
主要分享一个Javascript点击其他任意地方隐藏关闭DIV实例,需要的朋友可以参考下。
js点击页面其他地方关闭div
一样的世界，不一样的时间
08-25 5375
$(document).bind("click",function(event){ var e = event || window.event; var elem = e.srcElement||e.target; while(
点击一个div其他地方关闭这个div并且不使这个div失效
weixin_30537451的博客
02-12 527
首先我们需要知道，页面的遍历是通过标签冒泡遍历的，如果说我们有一个页面body，里面有一个标签div 使这个div在点击其他地方关闭，但是点击这个div内部关闭。这时候我们经常会用到一个叫做停止事件，代码如下： function stopPropagation(e) { if (e.stopPropagation) e.stopPropag...
Javascript onclick点击事件 鼠标点击实现显示与隐藏
爬楼梯的前端小白的博客
06-20 5921
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
如何点击一个div盒子之外的部分，使这个div盒子关闭
qq_44705916的博客
10-28 2199
【代码】如何点击一个div盒子之外的部分，使这个div盒子关闭。
js使点击网页其他地方使显示框消失
jamesleel的专栏
11-30 2062
有时候我们需要实现这样一个效果： 点击图标或者按钮会出现一个下拉框或者显示框，点击图标或者按钮显示框消失，或者需要点击网页其他任意地方显示框消失。 点击固定图标或按钮显示框显示或消失这个jQuery或者js就能很容易实现，这里说下点击网页其他任意地方显示框消失。 jQuery代码： jQuery("body").click(function(e){ e = e
HTML 点击空白处关闭对话框的另类实现（blur）
japlus的博客
10-16 928
div 增加属性tabIndex 使div能响应focus和blur事件
HTML关闭布局西部区域,jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】...
weixin_39787606的博客
06-26 82
本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考，具体如下：原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》，小编顺便对原文区域外点击bug进行了修改，具体代码如下：www.jb51.net jQuery点击关闭弹出层.area{width:100%;height:100%;position:fixed;z-index:1;}.hide{d...
原生Js右键菜单，点击页面其他位置的时候，隐藏菜单
最新发布
06-09
你可以使用`addEventListener`方法为`window`对象添加`click`事件监听器，当用户点击页面其他位置时，隐藏右键菜单。这里的思路是在右键菜单显示时，为`window`对象添加一个`click`事件监听器，当用户点击页面其他位置时，就隐藏菜单，同时移除该`click`事件监听器，以免影响后续的点击事件。以下是示例代码： ``` var contextMenu = document.querySelector('.context-menu'); // 获取右键菜单元素 function showContextMenu(event) { event.preventDefault(); // 阻止默认的右键菜单弹出 contextMenu.style.display = 'block'; // 显示右键菜单 // 在window上添加click事件监听器 window.addEventListener('click', hideContextMenu); } function hideContextMenu() { contextMenu.style.display = 'none'; // 隐藏右键菜单 // 移除window上的click事件监听器 window.removeEventListener('click', hideContextMenu); } // 给需要显示右键菜单的元素添加contextmenu事件监听器 document.addEventListener('contextmenu', showContextMenu); ``` 在上面的代码中，`showContextMenu`函数用于显示右键菜单，它会阻止默认的右键菜单弹出，并将右键菜单元素的`display`属性设置为`block`。然后，在`window`对象上添加一个`click`事件监听器，以便在用户点击页面其他位置时，隐藏右键菜单。 `hideContextMenu`函数用于隐藏右键菜单，它会将右键菜单元素的`display`属性设置为`none`，并从`window`对象上移除`click`事件监听器。 最后，使用`document.addEventListener`方法为需要显示右键菜单的元素添加`contextmenu`事件监听器，当用户在该元素上右键点击时，就会触发`showContextMenu`函数，显示右键菜单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值