js实现的点击div区域外隐藏div区域


Posted in Javascript onJune 30, 2014

首先看下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>
Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
javascript冒泡排序小结
Apr 10 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
js实现特定位取反原理及示例
Jun 30 #Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 #Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 #Javascript
html文本框提示效果的示例代码
Jun 28 #Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 #Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 #Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 #Javascript
You might like
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
Yii2实现自定义独立验证器的方法
2017/05/05 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
php函数式编程简单示例
2019/08/08 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python with用法实例
2015/04/14 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
pyqt5自定义信号实例解析
2018/01/31 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
Django的CVB实例详解
2020/02/10 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
六查六看心得体会
2014/10/14 职场文书
项目安全员岗位职责
2015/02/15 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript