点击页面其它地方隐藏该div的两种思路


Posted in Javascript onNovember 18, 2013

思路一

第一种思路分两步

第一步:对document的click事件绑定事件处理程序,使其隐藏该div

第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div。

<script type="text/javascript"> 
function stopPropagation(e) { 
if (e.stopPropagation) 
e.stopPropagation(); 
else 
e.cancelBubble = true; 
} $(document).bind('click',function(){ 
$('#test').css('display','none'); 
}); 
$('#test').bind('click',function(e){ 
stopPropagation(e); 
}); 
</script>

这样当点击页面非div区域的时候,直接或层层冒泡会调用document的onclick方法,隐藏该div,而点击div或其子元素的时候,事件总会冒泡的div本身,这时候会阻止事件继续冒泡,不会调用doument的onclick方法致使div被隐藏,从而完成了我们的需求。

思路二

我们之前提到,在触发DOM上的某个事件的时候会产生一个事件对象event,这个对象包含着所有与事件有关的信息,包括产生事件的元素、事件类型等相关信息,思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式,取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时,event对象作为window对象的一个属性存在。

event对象包含了一个重要属性:target(W3C)/srcElement(IE),这个属性标识了触发事件的原始元素,思路二就是要利用这个属性。我们可以直接对document的click事件绑定事件处理程序,在事件处理程序中判读事件源是否为id==test的div元素或其子元素,如果是则方法return不做操作,如果不是则隐藏该div。

<script type="text/javascript"> 
$(document).bind('click',function(e){ 
var e = e || window.event; //浏览器兼容性 
var elem = e.target || e.srcElement; 
while (elem) { //循环判断至跟节点,防止点击的是div子元素 
if (elem.id && elem.id=='test') { 
return; 
} 
elem = elem.parentNode; 
} $('#test').css('display','none'); //点击的不是div或其子元素 
}); 
</script>

这样当点击页面任何地方的时候都会层层冒泡至document的click事件,事件处理程序会判断事件源是否为id==test的div或其子元素,如果是方法return,否则隐藏该div,也能够实现我们的需求。
Javascript 相关文章推荐
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
Express.JS使用详解
Jul 17 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 #Javascript
Jquery取得iframe下内容的方法
Nov 18 #Javascript
JavaScript实现的日期控件具体代码
Nov 18 #Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 #Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 #Javascript
js call方法详细介绍(js 的继承)
Nov 18 #Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
php adodb连接mssql解决乱码问题
2009/06/12 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
浅析javascript中的Event事件
2016/12/09 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python实现图像外边界跟踪操作
2020/07/13 Python
python函数超时自动退出的实操方法
2020/12/28 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
跟单业务员岗位职责
2014/03/08 职场文书
驾驶员培训方案
2014/05/01 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
小学英语复习计划
2015/01/19 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
质量保证书格式模板
2015/02/27 职场文书
员工离职通知函
2015/04/25 职场文书
被告答辩状范文
2015/05/22 职场文书