点击页面其它地方隐藏该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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
JavaScript ES6的函数拓展
Jan 18 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
ThinkPHP视图查询详解
2014/06/30 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Java分治归并排序算法实例详解
2017/12/12 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Pytorch中.new()的作用详解
2020/02/18 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
运动会通讯稿400字
2014/01/28 职场文书
职务任命书范本
2014/06/05 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
婚宴领导致辞
2015/07/28 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书