1. <script type="text/javascript">
  2. function stopPropagation(e) {
  3. if (e.stopPropagation)
  4. e.stopPropagation();//停止冒泡 非ie
  5. else
  6. e.cancelBubble = true;//停止冒泡 ie
  7. }
  8. $(document).bind('click',function(){
  9. $('#test').css('display','none');
  10. });
  11. $('#test').bind('click',function(e){
    //写要执行的内容....吥啦不啦
  12. stopPropagation(e);//调用停止冒泡方法,阻止document方法的执行
  13. });
  14. </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。

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

jquery 点击其他地方的更多相关文章

  1. jquery点击其他地方隐藏div层的实现程序

    js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...

  2. Jquery手机点击其他地方隐藏控件问题

    因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...

  3. 点击其它地方关闭DIV

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

  5. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  6. artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

    artTemplate里一个比不上jQuery tmpl模板的地方就是放一个数组进去它不会自动循环.

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery点击改变class并toggle;jquery点击改变图片src源码并toggle;jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

随机推荐

  1. 程序猿必须知道FTP命令

                                             程序猿必须知道FTP命令 文件传输软件的使用格式为:FTP<FTP地址>.若连 接成功.系统将提示用户输入 ...

  2. HTML的SEO(搜索引擎优化)标准

    HTML的SEO(搜索引擎优化)标准 一.总结 这个做seo的时候要多看,做网站优化的时候 1. SEO(搜索引擎优化):通过总结搜索引擎的排名规律,对网站进行合理优化,使你的网站在百度和Google ...

  3. Android Unable to execute dex: method ID not in [0, 0xffff]: 65536 问题解决方法

    开始一个新项目的时候,Build工程的时候一直报这个错误: 控制台报错误:Conversion to Dalvik format failed: Unable to execute dex: meth ...

  4. PHP中 “ . ” 和 “ ,”的区别

    在PHP中,“ . ”可以串接两个变量.而“ , ”却没什么用处.

  5. ES5比较Jquery中的each与map 方法?

    1.each es5: var arr = [1, 5, 7, 8, 9];var arr1 = []; arr.forEach(function (v, i) { arr1.push(v * 4) ...

  6. ThinkPHP5.0的安装

    ThinkPHP5.0的安装很简单: 1.下载“phpstudy”安装 2.下载thinkphp源文件 3.把thinkphp源文件解压并放到phpstudy目录下的“WWW”目录 4.然后开启服务并 ...

  7. Android Material风格的应用(三)--DrawerLayout

    添加抽屉导航 Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--RecyclerViewAndroid Mater ...

  8. 互信息 & 卡方 - 文本挖掘

    在做文本挖掘,特别是有监督的学习时,常常需要从文本中提取特征,提取出对学习有价值的分类,而不是把所有的词都用上,因此一些词对分类的作用不大,比如“的.是.在.了”等停用词.这里介绍两种常用的特征选择方 ...

  9. 异步载入JS

      平时最常使用的就是这样的同步载入形式:    <script src="http://yourdomain.com/script.js"></script&g ...

  10. AS2.0鼠标尾随和拖动代码

    1,鼠标尾随. a: Mouse.hide();//隐藏鼠标.Mouse.show()显示鼠标. MC1.startDrag(true);//直接利用函数实现. b: Mouse.hide(); on ...