js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根。
阻止冒泡:1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true,对于IE浏览器,
而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation();
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script> <title></title> </head> <style type="text/css"> body { background-color:#999999; } #myDiv { background-color:#FFFFFF; width:250px; height:250px; display:none; } </style> <body> <input id="btn" type="button" value="显示DIV" /> <div id="myDiv"> This is a div; </div> </body> <script type="text/javascript"> var myDiv = $("#myDiv"); $(function () { $("#btn").click(function (event) { showDiv();//调用显示DIV方法 $(document).one("click", function () {//对document绑定一个影藏Div方法 $(myDiv).hide(); }); event.stopPropagation();//阻止事件向上冒泡 }); $(myDiv).click(function (event) { event.stopPropagation();//阻止事件向上冒泡 }); }); function showDiv() { $(myDiv).fadeIn(); } </script>
相关推荐
-
点击页面其它地方隐藏该div的两种思路
思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. 复制代码 代码如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagat
-
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!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>
-
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
当需要实现如下图操作,点击服务评分,出现一个服务评分窗口用来填入相关表单信息 可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接,这是不对的,因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面,不能被点击,如下: /* 定义一个div用于覆盖整个页面,这个div的z-index大于body,小于服务评分div */ #temp{ background-color: #000; opacity: 0.3; width: 100%; heigh
-
将两个div左右并列显示并实现点击标题切换内容
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
-
ajax实现点击不同的链接让返回的内容显示在特定div里
/* 以下代码通过ajax实现在一个web页面点击不同的链接,然后将返回的结果显示在该页面固定的div里. */ <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script language="javascript"> var http_request = false; function create
-
js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>
-
点击页面任何位置隐藏div的实现方法
实例如下: <include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script> <scri
-
js实现简易点击切换显示或隐藏
本文实例为大家分享了js实现简易点击切换显示或隐藏的具体代码,供大家参考,具体内容如下 html: <div id="header"> <p>点击切换显示隐藏</p> <div class="close" onclick="closeTask()">关闭</div> </div> <div class="open" onclick="ope
-
由点击页面其它地方隐藏div所想到的jQuery的delegate
先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div> 对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML
-
js实现的点击超链显示隐藏层
点击链接,显示提示框,提示框里也有链接可点击. 鼠标移开链接或者移开提示框,提示框就隐藏. 下面这个我写的不能自适应,如果菜单左对齐,显示层能否自动在右边显示?应该怎样调整JS? test body {background-color: #fff; font-size:14px; color:#666;} #link-url a {display:block; height:30px; line-height:30px;width:100px; color:#666; text-decorati
-
js加载读取内容及显示与隐藏div示例
复制代码 代码如下: <head> <script> function check(){ var num = document.getElementById("choose").value; alert(num); if(num=="4"){ document.getElementById("show").style.display="block"; }else{ document.getElement
-
JS实现表单中点击小眼睛显示隐藏密码框中的密码
领导交个一个任务,要求在表单中点击小眼睛显示隐藏密码框中的密码!在一些网站中经常会用到这样的功能,今天小编就给大家分享我的实现思路及代码 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 最终效果图 css样式部分,样式可根据自己喜好设置,没有过硬要求 <style> div:first-child { width: 300px; height: 50px; background-color: red; color: white; margin: 20px
-
JQuery显示、隐藏div的几种方法简明总结
例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法 //$("#top_notice").attr("style", "display:block;");//第2种方法 //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c
-
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||
-
vue 点击其他区域关闭自定义div操作
方法一: 在外层div添加事件 @click="closeSel" html method closeSel(event){ var currentCli = document.getElementById("sellineName"); if(currentCli ){ if(!currentCli.contains(event.target)){ //点击到了id为sellineName以外的区域,隐藏下拉框 this.listLineUl = false; }
随机推荐
- Oracle dbca时报:ORA-12547: TNS:lost contact错误的解决
- JQuery对ASP.NET MVC数据进行更新删除
- GridView控件实现数据的显示和删除(第8节)
- javascript实现在网页任意处点左键弹出隐藏菜单的方法
- JS实现的点击表头排序功能示例
- 用Javascript检查Adobe PDF插件是否安装的实现代码
- 浅谈c++构造函数问题,初始化和赋值问题
- 深入理解C/C++中的写时拷贝
- 老生常谈C++的单例模式与线程安全单例模式(懒汉/饿汉)
- 关于在MFC中将窗口最小化到托盘实现原理及操作步骤
- jQuery实现 上升、下降、删除、添加一行代码
- jquery attr方法获取input的checked属性问题
- 我是如何发现CCProxy远程溢出漏洞的
- Android中创建快捷方式代码实例
- C#编程实现自定义热键的方法
- js实现以最简单的方式将数组元素添加到对象中的方法
- Vue.js实现的表格增加删除demo示例
- 判断js数据类型的函数实例详解
- 你知道一台Linux服务器可以负载多少个连接吗
- 一次简单的Oracle恢复Case实战记录