js兼容

javascript兼容问题及处理

1. 事件绑定
2. event事件
3. scrollTop
4. 浏览器默认事件
5. 阻止冒泡
6. 滚轮
7. getElementsByClassName
8. 获取样式

事件绑定

兼容写法：

function add(obj,event){
    if  (obj.addEventListener)  {
         obj.addEventListener(event,fn,fase);
    } 
    else {
        obj.attachEvent("on"+event,fn);
    }
}

小结：addEventListener()兼容firefox、chrome、safari、opera、IE9+;
attachEvent()兼容IE7,8
　　　

event事件对象

兼容写法

document.onclick = function(e){
    var e = e||window.event;  
    console.log(e.clientX);
}

小结：e兼容火狐浏览器，
window.event兼容非火狐

获取scrollTop

兼容写法：

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

小结：document.documentElement.scrollTop兼容非chrome;
document.body.scrollTop兼容chrome

阻止浏览器默认事件

兼容写法：

function prevent(event){
    if (event.preventDefault) {
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
 }

小结：eventPreventDefault()不兼容IE6-8;
event.returnValue = false;兼容IE

阻止冒泡

兼容写法：

 <pre>function stop(event){
    if (event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancleBubble = true;
    }
 }

小结：event.stopPropagation()不兼容IE6-8;
event.cancleBubble = true兼容IE
　　

滚轮

兼容写法：

function mouseWheel(obj,fn){
     var ff = window.navigator.userAgent.indexOf('Firefox');
     if (ff!=-1) {  
　　　　　　obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
    }else{
        obj.onmousewheel = wheel;//非火狐
    }
}

小结：obj.addEventListener(‘DOMMouseScroll’,wheel,false);//兼容火狐
obj.onmousewheel = wheel;//非火狐
　　　

获取class

兼容写法：

function byClass(parent,className){
        if (parent.getElementsByClassName) {
         return parent.getElementsByClassName(className);
    }else{
        var arr = [];
        var els = parent.getElementsByTagName('*');
        var reg = new RegExp('\\b'+className+'\\b',g);
        for (var i=0;i<els.length;i++) {
            if (reg.test(els.className)) {
                arr.push(els[i]);
            }
         }
         return arr;
 }

小结：getElementsByClassName //IE8以下不兼容

获取样式

兼容写法

var cur = obj.currentStyle ? obj.currentStyle.attr :window.getComputedStyle(ob, pseudoElt).attr;

小结： 首先js有四种获取样式的方式，下面中的‘Attr’代表样式属性

obj.offsetAttr，例如obj.offsetLeft。全系列浏览器兼容，但obj.offsetWidth中的width=width+padding+border；所以在运动框架中这个获得的值会有bug。而下面三种获取样式的方法，只会获取width=width。

.obj.style.attr 例如obj.style.left。只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的

obj.currentStyle.attr 或者obj.currentStyle[‘attr’]。这个则只能在IE8及以下使用

window.getComputedStyle(ob, pseudoElt).attr 或者 window.getComputedStyle(ob, pseudoElt)[‘attr’]这个在现代浏览器中可以使用。