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静态的动态
Sep 18 Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
基于mysql的bbs设计(二)
2006/10/09 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
django中的setting最佳配置小结
2017/11/21 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
护士节慰问信
2015/02/15 职场文书