<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 点击其他地方的更多相关文章

  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. JS/CSS 在屏幕底部弹出消息

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  3. C#解决关闭多线程的form主窗体时抛出ObjectDisposedException 异常

    一.现象: 我在主窗体新建线程,使用子线程来处理接收到的数据,并且更新窗体显示内容,但关闭主窗体程序之后就程序就报错,如下所示: 二.分析问题: 由于新建线程的处理函数里边是一直死循环处理数据,虽然窗 ...

  4. 洛谷 P2374 搬运工

    P2374 搬运工 题目背景 陈老师喜欢网购书籍,经常一次购它个百八十本,然后拿来倒卖牟取暴利.(ps:描述要看懂) 题目描述 前些天,高一的新同学来了,他便像往常一样兜售他的书,经过一番口舌,同学们 ...

  5. 不是IT圈人的IT创业优劣势!

    不是IT圈人的IT创业优势: 1)更尊重市场导向而非技术   2)更关注产品细节而非技术  3)更关注企业平衡而非技术 不是IT圈人的IT创业劣势: 1)因营销而放弃技术规划   2)因需求而丧失技术 ...

  6. Xcode7 的两个小坑

    Xcode7 还在 beta.时不时崩一下什么的倒也是预料之中的事.没料到的是之前用着好好的,今天升完 El Capitan 之后,模拟器竟然不见了,设备倒是在 schema 栏右边里能看到.只是注明 ...

  7. JS 保留2位小数 四舍五入(小数点后面不足2位,自动用0补齐)

    function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTw ...

  8. Mongodb总结1-启动和Shell脚本

    2013年,还在秒针,当时听说了Mongodb,就学习了下,搞了下HelloWorld.主要是熟悉Mongodb的启动.命令行的Shell脚本.Java访问的CRUD. 今天,由于需要,再次回顾和进一 ...

  9. [D3] Animate Chart Axis Transitions in D3 v4

    When the data being rendered by a chart changes, sometimes it necessitates a change to the scales an ...

  10. C++卷积神经网络实例:tiny_cnn代码具体解释(8)——partial_connected_layer层结构类分析(上)

    在之前的博文中我们已经将顶层的网络结构都介绍完毕,包括卷积层.下採样层.全连接层,在这篇博文中主要有两个任务.一是总体贯通一下卷积神经网络在对图像进行卷积处理的整个流程,二是继续我们的类分析.这次须要 ...