点击任何位置隐藏所需隐藏的元素 (无BUG/jQuery版)

1>第一种分两步

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

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

 1 <script type="text/javascript">
 2     function stopPropagation(e) {
 3         if (e.stopPropagation)
 4         e.stopPropagation();
 5         else
 6         e.cancelBubble = true;
 7     }
 8
 9     $(document).bind(‘click‘,function(){
10         $(‘#test‘).css(‘display‘,‘none‘);
11     });
12
13     $(‘#test‘).bind(‘click‘,function(e){
14         stopPropagation(e);
15     });
16 </script> 

这样当点击页面非div区域的时候,直接或层层冒泡会调用document的onclick方法,隐藏该div,而点击div或其子元素的时候,

事件总会冒泡的div本身,这时候会阻止事件继续冒泡,不会调用doument的onclick方法致使div被隐藏,从而完成了我们的需求。

2>第二种

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

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

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

这样当点击页面任何地方的时候都会层层冒泡至document的click事件,事件处理程序会判断事件源是否为id==test的div或其子元素,

如果是方法return,否则隐藏该div,也能够实现我们的需求。

原文地址:https://www.cnblogs.com/Zhushaoyu/p/8662848.html

时间: 2024-11-09 03:47:11

点击任何位置隐藏所需隐藏的元素 (无BUG/jQuery版)的相关文章

Python3 Tkinter基础 Frame bind 绑定鼠标左右键 打印点击的位置 event.x event.x_root

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: from tkinter import * root=Tk() #创建一个框架,在这个框架中响应事件 frame=Frame(root,width=200,height=200) def callBackLeft(event): print("相对于应用程序左上

jQuery如何实现点击下拉菜单的隐藏和显示

jQuery如何实现点击下拉菜单的隐藏和显示:在众多的网站都有这样的效果,那就是点击一个父菜单就会显示下拉子菜单,再点击父菜单,那么子菜单就会隐藏,下面就简单介绍一下如何实现此中效果.这里只介绍如何使用jQuery实现此效果,暂且不考虑效果的美观度,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" co

点击空白区域隐藏指定元素实例代码

点击空白区域隐藏指定元素实例代码:此效果不是无的放矢的,当然正常的应用应该没有这么简单,一般都是和其他的功能结合在一起的,比如自定义select下拉菜单,点击空白区域的时候可以隐藏下拉菜单,本章节就是单独拿出这个功能做一下简单的介绍.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content=&

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

李洪强iOS开发之-实现点击单行View显示和隐藏Cell

李洪强iOS开发之-实现点击单行View显示和隐藏Cell 实现的效果:  ....

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

js实现密码框的点击眼睛的显示与隐藏

密码框的点击眼睛的显示与隐藏,图标引用是bootstrap中的fontawesome (复制整个 font-awesome 文件夹到您的项目中) 还需要引入 <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="Fo

query 点击元素以外任意地方隐藏该元素的方法

第一先实现点击任何地方都隐藏该元素(假设id="bar") $(document).click(function(){$("#bar").hide(); });那么bar也属于document,点击bar也会让自己隐藏,显然这不是想要的,这时候要阻止冒泡事件,即document的事件对bar无效$("#bar").click(function(event){event.stopPropagation(); }); 原文地址:https://www

利用WPF建立自己的3d gis软件(非axhost方式)(五)在鼠标点击的位置增加UI

原文:利用WPF建立自己的3d gis软件(非axhost方式)(五)在鼠标点击的位置增加UI 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPew 密码:1te1 地图数据包(sqlserver2008R2版本,也可以不下载):? https://pan.baidu.com/s/1PjcNamad7OVpCrsVJ7dwFQ密码:uw9r 下载 核心SDK升级包:https://pan.baidu.com/s/1Q3dlM-Va-RmlE