js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框
2015-01-14 14:48
1046 查看
在本文为大家介绍两种思路实现点击页面其它地方隐藏该div
思路一
第一种思路分两步
第一步:对document的click事件绑定事件处理程序,使其隐藏该div
第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div。
代码如下:
这样当点击页面非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。
代码如下:
这样当点击页面任何地方的时候都会层层冒泡至document的click事件,事件处理程序会判断事件源是否为id==test的div或其子元素,如果是方法return,否则隐藏该div,也能够实现我们的需求。
思路二 的一些细节的变化
原文地址:http://www.jb51.net/article/43372.htm(如冒犯原作,请告之,在此处仅收藏目的)
思路一
第一种思路分两步
第一步:对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,也能够实现我们的需求。
思路二 的一些细节的变化
document.onclick = function (event) { var e = event || window.event; var elem = e.srcElement || e.target; while (elem) { if (elem != document) { if (elem.id == "目标ID") { show(); return; } elem = elem.parentNode; } else { hide(); return; } } }
原文地址:http://www.jb51.net/article/43372.htm(如冒犯原作,请告之,在此处仅收藏目的)
相关文章推荐
- js/jq 点击按钮显示div,点击页面其他任何地方隐藏div
- js如何实现点击一个按钮显示一个div,然后该div上有一个按钮,点击此按钮后隐藏,隐藏的同时显示另外一个div,而在次弹出的div也有一个按钮,点击后隐藏.
- div小型浮动层,类似锚点提示文字,鼠标点击按钮显示/隐藏
- JavaScript点击一个按钮隐藏和显示div
- 两个单选按钮(一个是,一个否 ),一个div层,实现点击隐藏,显示div
- 在页面中,我们经常看到,一个button按钮,如果属标点击,就会触发一个窗口的显示,如果二次点击并可以隐藏,那么如何通过JAVA配合html来实现这一功能呢?
- js控制点击让div滚动,显示一个,隐藏一个
- js 页面按钮提交后 创建显示loading div 操作完成后 再隐藏或删除 进度div
- js中 做一个button按钮,页面开始五秒钟之后才可进行点击,并且要求按钮上实时显示当前所剩秒数
- 使用jquery实现点击一个按钮或连接,让它下面的div显示,在点击一下隐藏
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
- css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分向上显示出来。 不用js操作,纯css就可以。
- js点击页面其它地方将某个显示的DIV隐藏
- 点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏
- 点击一个按钮显示div,点击div之外的地方div隐藏,点击div之内的地方div不隐藏
- js点击页面其他地方,对目标进行操作比如隐藏div
- 怎样用jquery实现点击一个按钮控制一个div的显示和隐藏
- 黑马程序员之WinForm编程基础学习笔记:页面上有一张图片,默认是隐藏的,用户在文本框中输入身份证号(131226198105223452),点击按钮,如果年龄大于18岁则显示图片。
- jquery点击按钮显示和隐藏DIv