由点击页面其它地方隐藏div所想到的jQuery的delegate

2020-05-22 15:46:16易采站长站整理



<script type=”text/javascript”>
            $(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或其子元素
            });
        </script>


这样当点击页面任何地方的时候都会层层冒泡至document的click事件,事件处理程序会判断事件源是否为id==test的div或其子元素,如果是方法return,否则隐藏该div,也能够实现我们的需求。


注意点及优劣


这两种思路都依赖于事件冒泡,所以我们在处理其它相关元素的click事件的时候一定要注意这点,避免其他相关元素的click事件处理程序中包含阻止事件冒泡代码而影响了该功能。


这两种方式都很容易理解,貌似思路一更优秀一些,看起来它的处理更简单一些,不用去层层判断事件源,直接把click事件绑定在该div上。在这个例子中确实如此,但是有些复杂的页面就不尽然了,假如我们有一个页面,上面有数十个div都需要点击页面其它地方隐藏这类问题



<div class=”dialogs”>
        <div class=”dialog”>
            <div id=”1″>1</div>
            <div id=”2″>2</div>
        </div>
        <div class=”dialog”>