JavaScript 兼容性总结

获取滚动距离的兼容

//非chrome
document.documentElement.scrollTop   
document.documentElement.scrollLeft

//chrome
document.body.scrollTop
document.body.scrollLeft

//兼容写法：由于浏览器只支持其中一种，另一种为0，因此采用相加的方式
var scrolltop = document.documentElement.scrollTop + document.body.scrollTop

//更为稳妥的兼容写法：
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop

getElementsByClassName()  // IE 低版本浏览器中无此方法

 

if(!document.getElementsByClassName){ //如果不存在该方法
    document.getElementsByClassName = function(classname){ //则手动创建
          var arr = []; 
          var all = document.getElementsByTagName("*");
          for(var i=0; i<all.length; i++){
               if(all[i].className.indexOf(classname+" ") != -1){
                    arr.push(all[i]); 
               }
          }
          return arr;
    } 
}

JS获取非行内样式

window.getComputedStyle(ele, null)      //非IE
ele.currentStyle      //IE

function getStyle(obj, attr) {
    if(obj.currentStyle) { //IE浏览器
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj,null)[attr];
    }
}

获取Event对象的兼容写法

obj.οnclick= function(evt){
     var e = evt || window.event;  // 常规浏览器 || IE
}

全世界最短IE6判定

if(!-[1,]) { //IE6       在IE6中[-1,].toString()为“1，”，‘-’会进行类型转换（转成数字类型），-"1,"  为NaN，所以返回！false
     
} else{ //非IE6   非IE6中[-1,].toString()为“1”，‘-’会进行类型转换（转成数字类型），-"1"  为-1，所以返回！true

}

全世界最无争议IE判定

if(window.VBArray){     //因为VB是微软发明的，其他浏览器无VBArray，至少可判定IE 6/7/8/9/10  

} else {

}

键盘码获取

document.οnkeypress=function(e){
	e = e || window.event;
	e.keyCode || e.which  // 常规浏览器 || IE
}

阻止事件传播（冒泡）

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;  // 常规浏览器 || IE

注：这里不可使用 e.cancelBubble？e.cancelBubble = true : e.stopPropagation()

        因为 e.cancelBubble 是一个属性（而非方法），其默认值为 false 

event.target （事件委托时，触发事件源）

var srcObj = event.target || event.srcElement;

阻止默认行为

event.preventDefault(); //常规浏览器
event.returnValue = false; // IE
e.preventDefault ? e.preventDefault() : e.returnValue=false;

事件监听

obj.addEventListener("click",function(){},true);   //非IE

obj.attachEvent("onclick", function(){});      //IE

function addEvent(ele, eventType, func, isCapture){
     if(ele && ele.attachEvent){  //
          ele.attachEvent("on"+eventType, func);
     } else {
          ele.addEventListener(eventType, func, isCapture||false);
     }
}

//懒加载函数
function addEvent(obj, eventname, func, isCapture){
	if(window.VBArray){
		obj.attachEvent("on"+eventname, func);
		addEvent = function(obj, eventname, func){ .//第一次执行后替换原函数
			obj.attachEvent("on"+eventname, func);
		}
	} else {
		obj.addEventListener(eventname, func, !!isCapture);
		addEvent = function(obj, eventname, func, isCapture){
			obj.addEventListener(eventname, func, !!isCapture);
		}
	}
}

函数柯里化

var addEvent = (function(){
    if(window.attachEvent) {
        return function(obj, eventType, func){
            obj.attachEvent("on"+eventType, func);
        }
    } else {
        return function(obj, eventType, func,  isCapture) {
            obj.addEventListener(eventType, func, isCapture||false);
        }
    }
})();

删除某元素监听事件

(function removeEvent(){
		if(window.VBArray) {
			return function(ele, eventName, callback) {
				ele.detach("on" + eventName, callback);
			}
		}
		return function(ele,eventName,callback,isCapture){
			ele.removeEventListener(eventName,callback);
		}
	})();

request对象的兼容（ajax请求中使用）

new ActiveXObject("Msxml2.XMLHTTP")   //IE
var req = ActiveXObject?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest() ;