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 相关文章推荐
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
JavaScript 去重和重复次数统计
Mar 31 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统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
Python入门篇之数字
2014/10/20 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
公司市场部岗位职责
2013/12/02 职场文书
绿色校园广播稿
2014/10/13 职场文书
交通安全温馨提示语
2015/07/14 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Python办公自动化之Excel(中)
2021/05/24 Python