IE兼容，盒模型，默认/冒泡事件

最新推荐文章于 2023-01-04 15:58:52 发布

原创最新推荐文章于 2023-01-04 15:58:52 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JS核心专栏收录该内容

27 篇文章

订阅专栏

本文介绍了CSS盒模型的不同类型，包括标准盒模型与IE盒模型，并提供了在不同浏览器中实现事件冒泡与默认事件阻止的兼容性解决方案。

1.IE 盒模型与标准盒模型

盒模型的组成，由里向外分别是 content，padding，border，margin
标准盒模型：内容大小就是content的大小 ( (margin + padding + border) * 2 + width )
IE盒模型：内容大小是 content，padding，border总的大小 ( margin * 2 + width )
通过设置 box-sizing: content-box(W3C) / border-box(IE) 就可以达到自由切换的效果

2.IE 阻止事件冒泡，兼容各个浏览器

function preventBubble(event){
    var e = arguments.callee.caller.arguments[0] || event
    if (e && e.stopPropagation) {
        // 标准浏览器阻止冒泡事件的方法
        e.stopPropagation()
    } else if (window.event) {
        // IE阻止冒泡事件的方法
        window.event.cancelBubble = true
    }
}

3.IE 阻止默认事件，兼容各个浏览器

function stopDefault(event) { 
    var e = arguments.callee.caller.arguments[0] || event
    if(e && e.preventDefault){
        // 标准浏览器阻止默认事件的方法
        e.preventDefault()
    } else if(window.event){
        // IE阻止冒默认事件的方法
        windoe.event.returnValue = false
    }
}