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 相关文章推荐
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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的控制语句
2006/10/09 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
编写Python爬虫抓取暴走漫画上gif图片的实例分享
2016/04/20 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
Django实现表单验证
2018/09/08 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
如何基于Python按行合并两个txt
2020/11/03 Python
css3学习心得分享
2013/08/19 HTML / CSS
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
酒店服务实习自我鉴定
2013/09/22 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
房产买卖委托公证书
2014/04/04 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
MongoDB支持的索引类型
2022/04/11 MongoDB