阻止浏览器默认的事件冒泡行为

Posted 2020-10-03 boyan

 事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

语法：e.stopPropagation();

参数e：表示事件传递的参数，代表事件的状态。

http://www.365mini.com/page/jquery-event-stoppropagation.htm

/*左侧导航栏出现和消失*/
    $(".show-list").unbind("click").click(function(){if(window.event) event.cancelBubble = true;
        else event.stopPropagation();
        $(".cr-sider-bar").show();        
    });
    /*点击屏幕任何部位弹出框消失*/
    $(document).click(function(){
        $(".cr-sider-bar").hide();
        $(".crbox-opra").hide();
    })
    

实现：点击show-list时，出现左侧导航栏，点击屏幕任意地方，左侧导航栏消失