zoukankan      html  css  js  c++  java
  • 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或其子元素
                });
  • 相关阅读:
    高级特性(4)- 数据库编程
    UVA Jin Ge Jin Qu hao 12563
    UVA 116 Unidirectional TSP
    HDU 2224 The shortest path
    poj 2677 Tour
    【算法学习】双调欧几里得旅行商问题(动态规划)
    南洋理工大学 ACM 在线评测系统 矩形嵌套
    UVA The Tower of Babylon
    uva A Spy in the Metro(洛谷 P2583 地铁间谍)
    洛谷 P1095 守望者的逃离
  • 原文地址:https://www.cnblogs.com/zonglonglong/p/5184418.html
Copyright © 2011-2022 走看看