博客

今天来总结一下JS的兼容问题和相关的解决方法。这里老规矩，吐槽一下万恶之源IE！！

1、

事件绑定的兼容问题

。这里先回顾一下事件绑定的方式，有DOM0级和DOM2级，DOM0级没有兼容性问题，但是缺点也很多，比如不可以在多次绑定同一个事件，后绑定的时间会将先绑定的事件覆盖！！DOM2级绑定方式支持大多数高级浏览器。但是IE8及以下浏览器不支持DOM2级绑定方式，它有自己的绑定方法：attachEvent。这时绑定事件就需要考虑浏览器的兼容性问题了，下边贴出完美解决兼容性问题的代码：

//三个形参分别表示绑定事件的元素，事件类型和事件函数
 function bindEvent(dom, type, handler) {
            if (dom.addEventListener) {
                console.log("高级浏览器执行该代码")
                dom.addEventListener(type, handler, false);
            } else if (dom.attachEvent) {
                console.log("高级IE浏览器执行该代码")
                dom.attachEvent("on" + type, handler);
            } else {
                console.log("其它浏览器使用DOM0级绑定方式。")
                var t = "on" + type;
                dom[t] = handler;
            }        bindEvent(box, "mousedown", function() {
           
        });  }

2、事件本身的兼容性问题。我们在需要使用鼠标坐标等信息时，需要用到event，在高级浏览器中会主动传递该参数，但是在IE8及以下浏览器中，将event放在了window.event属性下，此时用短路语法即可轻松解决。以下为代码

            var event = event || window.event;
             event 是浏览器收集到的触发事件时的信息组成的对象 

顺带一提，IE中没有e.pagaX和e.pageY这两个属性。

3、获取页面滚动值scrollTop的兼容问题。一些浏览器将scrollTop绑定在body上，还有一些绑定在HTML上，解决办法：

var scrollTop = document.body.scrollTop || document.documentElement.scroll

4、获取CSS样式的兼容性问题。高级浏览器的方法为getComputedStyle，IE中为currentStyle。解决方法：

//第一个形参为要获取样式的元素，第二个为要获取元素的样式
        function getCss(ele, cssName) {
           //能力检测 检测是否具备getComputedStyle方法
            if (window.getComputedStyle) {
                //如果有 就调用并得到ele这个元素的css样式对象（属性）
                var cssObj = getComputedStyle(ele);
                //返回对应的属性
                return cssObj[cssName];
            } else {
                //如果没有 通过currentStyle属性获取css样式对象
                var cssObj = ele.currentStyle;
                 //返回对应的属性
                return cssObj[cssName];
            }

5、目标精确元素的兼容性问题，在高级浏览器中触发事件的元素为e.target,在IE中为e.srcElement。也是使用短路语法就可以啦！

6、停止事件冒泡的兼容性问题。在高级浏览器中为e.stopPropagation()。在IE中为 e.cancelBubble = true;

暂时想到的就这么多啦！有错误的地方还请各位大侠指出！！