美文网首页
js事件冒泡和捕获,阻止冒泡和默认行为

js事件冒泡和捕获,阻止冒泡和默认行为

作者: adtk | 来源:发表于2017-03-17 11:09 被阅读0次
    兼容性都是IE8及以下

    事件冒泡:

    事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。自下而上。
    1.连续点击两次,会按顺序执行两次
    2.顺序:

     div->父级 -> body -> html -> document -> window
    

    事件捕获(event capturing):

    事件从document到触发事件的那个节点,即自上而下的去触发事件

    第三个参数:
    true,事件捕获;
    false,事件冒泡。
    ele.addEventListener("click", function(){}, false);
    
    IE8及以下,只支持事件冒泡:
    ele.attachEvent("onclick",function(){});
    
    
    兼容写法:
    if (window.addEventListener) {
        ele.addEventListener("click",function(){
            console.log(1)
        },false);
    }else{
        ele.attachEvent("onclick",function(){
            console.log(3);
        })
    }
    
    阻止冒泡:
    function stopBubble(e) {
        // 如果提供了事件对象,则这是一个非IE浏览器
        if ( e && e.stopPropagation ) {
            // 因此它支持W3C的stopPropagation()方法 
            e.stopPropagation();
        } else {
            // 否则,我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
        }
    }
    
    或
    return false;//ie8及以下未知
    
    阻止默认行为:
    function stopDefault( e ) {
        // 阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault ) {
            e.preventDefault();
        } else {
            // IE中阻止函数器默认动作的方式
            window.event.returnValue = false;
        }
        return false;
    }
    

    相关文章

      网友评论

          本文标题:js事件冒泡和捕获,阻止冒泡和默认行为

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