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 相关文章推荐
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 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 中使用随机数的三个步骤
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
JavaScript 常用函数
2009/12/30 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
浅谈对yield的初步理解
2017/05/29 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python OpenCV实现视频分帧
2019/06/01 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
美国校服网上商店:French Toast
2019/10/08 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
《詹天佑》教学反思
2016/02/20 职场文书