jQuery点击其他地方时菜单消失的实现方法


Posted in Javascript onApril 22, 2016

本文实例讲述了jQuery点击其他地方时菜单消失的实现方法。分享给大家供大家参考,具体如下:

<script type="text/javascript">
  function stopPropagation(e) {
    if (e.stopPropagation) 
      e.stopPropagation();//停止冒泡  非ie
    else 
      e.cancelBubble = true;//停止冒泡 ie
  }
  $(document).bind('click',function(){
    $('#test').css('display','none');
  });
  $('#test').bind('click',function(e){
  //写要执行的内容....?睦膊焕
    stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  });
</script>

事情是这样的,比如我点击一个div显示出一个菜单,当点击其他地方,菜单消失,其中一个思路就是给document绑定上click事件,如果是点击div就显示菜单,如果是点击document就隐藏菜单,但是如果点击div也等于是点击了document,所以在点击div的事件里面执行完要执行的语句,然后终止js的冒泡,否则会既执行了div的点击事件,又继续冒泡到document事件上,执行了document的click的内容

我的意思就是div也属于document,所以点击div也是点击了document,所以在不进行任何限制的情况下,点击div的时候,div和document的方法都会执行,进行限制的具体内容就是在点击div的方法里面停止冒泡,具体方法就是用e.stopPropagation()→"适用于非ie"方法,如果是ie就是e.cancelBubble=true

还有一种思路就是在document的click方法中判断触发的源是哪一个,如果是div的话就不执行任何操作也就是return,如果不是div的话,那就将菜单隐藏具体如下

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

$(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或其子元素
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
详解Vue方法与事件
Mar 09 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
JS简单循环遍历json数组的方法
Apr 22 #Javascript
JavaScript中数组去除重复的三种方法
Apr 22 #Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 #Javascript
动态加载JavaScript文件的两种方法
Apr 22 #Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 #Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 #Javascript
You might like
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php+highchats生成动态统计图
2014/05/21 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
js使用递归解析xml
2014/12/12 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中关于字符串对象的一些基础知识
2015/04/08 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python中取绝对值简单方法总结
2020/07/24 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
C#面试问题
2016/07/29 面试题
优秀中专生推荐信
2013/11/17 职场文书
领导干部考察材料
2014/02/08 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
个人租房协议书
2014/04/09 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
导游词之新疆-喀纳斯
2019/10/10 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL