DIV外区域Click后关闭DIV的实现代码
阻止冒泡:
1、stopPropagation()对于非IE浏览器。
2、cancelBubble属性为true,对于IE浏览器,
而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation();
代码如下:
<style>
body
{
background:black;
}
#myDiv
{
background: #fff;
width:250px;
height:250px;
display:none;
}
</style>
<div id="myDiv">
This is a div;
</div>
<input id="btn" type="button" value="显示DIV" />
<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>
相关推荐
-
javascript 设置某DIV区域内的checkbox复选框
<!--HTML代码片段如下: --> 复制代码 代码如下: <div id="div1"> <input type="checkbox" onclick="selectCheckBoxes('div1', this.checked)" />全选<br/> <input type="checkbox" /><br/> <input type=&quo
-
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法.分享给大家供大家参考,具体如下: 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了. 以下图为例的一个下拉菜单为参考: 效果实现源码: $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target ||
-
window.print打印指定div指定网页指定区域的方法
第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容.哈哈! <p class="noprint">将不打印的代码放在这里.</p> <a href="javascript:
-
如何判断鼠标是否在DIV的区域内
今天研究了一下这个问题,也普及了一下知识吧. 方法一: 通过mouseover,mouseout来触发事件,才判断鼠标是否在该区域. 但是这种方法的局限性就是,必须要触发mouseover,或mouseout,mouseleave事件才能知道. 复制代码 代码如下: function chkIn() { div_1.innerText = "现在你把鼠标移入层了!"; div_1.style.font = "normal black"; } funct
-
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>js</title> <script src="http://code.jquery.com/jquery-
-
jquery使整个div区域可以点击的方法
本文实例讲述了jquery使整个div区域可以点击的方法.分享给大家供大家参考.具体分析如下: 这里实现可以让用户点击整个div区域,这段代码会自动查找div里的链接 $(".myBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); Reference HTML: <div class="myBox&quo
-
js实现的点击div区域外隐藏div区域
首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>
-
DIV外区域Click后关闭DIV的实现代码
阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); 复制代码 代码如下: <style> body { background:black; } #myDiv { background: #fff; width:250px; height:250px; display:none; } </style> &
-
DIV层之拖动、关闭、打开效果代码
div托动,打开,关闭效果 body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; displ
-
点击弹出层外区域关闭弹出层jquery特效示例
点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了: 复制代码 代码如下: <html> <head> <style> .hide{display:none;} .con{width:500px;height:300px;background:#000;} </style> <title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title> <script type="text/
-
Javascript点击其他任意地方隐藏关闭DIV实例
代码如下,实现了点击input显示一个div层,当点击除input和div以外的地方的时候,隐藏div的功能. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击其它地方关闭DIV</title> </head> <body> <input type="text" value="
-
js实现点击按钮后给Div图层设置随机背景颜色的方法
本文实例讲述了js实现点击按钮后给Div图层设置随机背景颜色的方法.分享给大家供大家参考.具体如下: 给myDiv设置随机背景颜色,用随机颜色代码赋值给DIV的背景颜色 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312"/> <title>js设置随机颜色 <
-
有关div页面拖动、缩放、关闭、遮罩效果代码
UntitledDocument #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{ position:absolute; background:#00F; width:3px; height:3px; z-index:6; font-size:0; } #rLeftDown,#rRightUp{cursor:ne-resize;} #rRightDown,#rLeftUp{cursor:nw-resize;
-
JS/jQuery实现DIV延时几秒后消失或显示的方法
本文实例讲述了JS/jQuery实现DIV延时几秒后消失或显示的方法.分享给大家供大家参考,具体如下: 1.最常用的方法(setTimeout): <script language='javascript' type='text/javascript'> $(function () { setTimeout(function () { $("divid").show(); }, 6000); }) </script> 2.第二种方法(delay) jquery
-
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框,登录成功以后关闭弹框,并调用父窗口方法. 1.界面如下: 2.login.html的界面主要代码: <div class="layer_form"> <div class="form_item"> <label>手机号码:</label> <div c
-
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩, 控制其的v-if(v-show)即可, 掌握到技巧既可以任意扩展. v-if 是直接删除dom节点, 就是这个div就不存在了 v-show 是控制dom的css样式设置为 display: none; 来实现,dom还是存在; 实现如下 maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它 <div class="mask" v-show="maskSho
随机推荐
- Ajax异步(请求)提交类 支持跨域
- DOS 强行杀进程的命令
- Java 将字符串动态生成字节码的实现方法
- Java实现操作excel表格
- 支持中文、字母、数字的PHP验证码
- php addslashes和mysql_real_escape_string
- 关于iOS中属性变量setter与getter方法的理解
- 详解C语言位域的使用与注意事项
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- explain分析sql效率的方法
- jQuery实现 注册时选择阅读条款 左右移动
- VBS教程:属性-Files 属性
- jquery中获得$.ajax()事件返回的值并添加事件的方法
- C#使用Matrix执行缩放的方法
- 雅虎公司C#笔试题(后半部份才是)
- JS实现访问DOM对象指定节点的方法示例
- 使用淘宝镜像cnpm安装Vue.js的图文教程
- jquery简单实现纵向的无缝滚动代码实例
- python文本数据处理学习笔记详解
- Javaweb监听器实例之统计在线人数