欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-12 20:24:07
...
兼容性都是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;
}