美文网首页
阻止事件冒泡

阻止事件冒泡

作者: Brandon_x | 来源:发表于2018-06-28 19:13 被阅读0次

    事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”; 

    执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“冒泡阶段(Bubble)”


    1.事件冒泡

              在一个对象上触发某类事件(例如单击事件onclick事件),若果此对象定义了此事件的处理程序,那么就会调用这个处理程序;但是如果没有定义此事件的处理程序或者事件返回true,那么这个事件就会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它达到了对象层次的最顶层,即document对象(有的浏览器是window)。

    2.解决方法

             1)在事件处理程序最后加上return flase;语句(只适用jQuery,原生js无效)它实际上做了3件事情:

                    event.preventDefault();

                    event.stopPropagation();

                    停止回调函数执行并立即返回。

             2)不用return且兼容ie的原生写法(ie8及其以下)

                (ie6/7/8 只支持window.event不支持参数传入,火狐只支持参数传入,IE9/Opera/Safari/Chrome 两种方式都支持)

                            vare = event ||window.event;

                                        if(e && e.stopPropagation) {

                                                e.stopPropagation();

                                        }else{

                                                e.cancelBubble =true;

                              }

    3.jQurey(jq),使用jQuery时不用考虑兼容性问题,但前提必须导入jQuery插件

                             $("id").click(function(e){

                                    e.stopPropagation();

                               });

    相关文章

      网友评论

          本文标题:阻止事件冒泡

          本文链接:https://www.haomeiwen.com/subject/uxenyftx.html