常见的几个JavaScript兼容问题及解决方案

常见的几个JavaScript兼容问题及解决方案

1. 事件对象的兼容

e = ev || window.event;

2. 滚动事件的兼容

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

3. 阻止冒泡事件的兼容

if(e.stopPropagation){
    e.stopPropagation();
}else{
    e.cancelBubble = true;
}

4. 阻止浏览器默认行为的兼容

if(e.preventDefault){
    e.preventDefault();
}else{
    e.returnValue = false;
}

5. 添加事件监听器的兼容

if(target.addEventListener){
    target.addEventListener("click",function,false);
}else{
    target.attachEvent("onclick",function);
}

6. ajax 创建对象的兼容

var xhr = null;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else {
    xhr = new ActiveXObject("Microsoft XMLHTTP");
}

7. 鼠标按键编码的兼容

function mouse(event){
    var e= event || window.event;
    if(event){
        return e.button;
    }else if(window.event){
        switch(e.button){
            case 1:return 0;
            case 4:return 1;
            case 2:return 2;
        }
    }
}

8. IE 浏览器 event 对象的 x,y 属性和 firefox 浏览器 event 对象的 pageX, pageY 属性的等效问题

x = event.x ? event.x:event.pageX;

9. IE 浏览器和 firefox 浏览器的 event 对象各自缺失 target 属性和 srcElement 属性的问题

var source = event.target || event.srcElement;
var target = event.relatedTarget || event.toElement;

10. innerText 属性在 firefox 浏览器中无法正常给你做的问题

if(navigator.appName.indexOf("Explorer")>-1){
    document.getElementById("element").innerText = "IE";
}else{
    document.getElementById("element").textContent = "Firefox";
}

11. IE 浏览器环境下不识别const 或者 let 定义的变量

解决方法：统一使用 var 定义变量。

12. firefox 浏览器和 IE 浏览器禁止选取网页内容的不同写法

// firefox CSS
-moz-user-select:none;

// IE JS
obj.onselectstart = function(){
	return false;
}

这里是万物之恋，我们下次再见了！