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 相关文章推荐
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
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
Zend的Registry机制的使用说明
2013/05/02 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
python处理中文编码和判断编码示例
2014/02/26 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python 的类、继承和多态详解
2017/07/16 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
举例讲解Python常用模块
2019/03/08 Python
使用Python pip怎么升级pip
2020/08/11 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
喷漆工的岗位职责
2014/03/17 职场文书
个人整改措施书面材料
2014/10/24 职场文书
小学英语复习计划
2015/01/19 职场文书
工作试用期自我评价
2015/03/10 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书