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 相关文章推荐
javascript 获取表单file全路径
Dec 31 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
如何使JavaScript休眠或等待
Apr 27 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
nodejs express配置自签名https服务器的方法
2018/05/22 NodeJs
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python判断操作系统类型代码分享
2014/11/22 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Django的models模型的具体使用
2019/07/15 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
小学生家长评语大全
2014/02/10 职场文书
销售助理岗位职责
2014/02/21 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
MySQL基础(二)
2021/04/05 MySQL
dubbo服务整合zipkin详解
2021/07/26 Java/Android
Python如何将list中的string转换为int
2022/07/15 Ruby