js的浏览器常见兼容问题汇总

JS中浏览器一些兼容的解决方法

• 在开发研发的过程中因为我们不知道用户是用什么版本的浏览器，所以经常会遇到浏览器兼容问题，对于不同的浏览器，一些js语法也不一样。今天我们就来总结一部分常见的浏览器兼容事件，希望对大家有所帮助

1，获取非行内样式的兼容

• IE浏览器：element.currentStyle[attr];
• 其他浏览器：getComputedStyle(element,false)[attr]
• 解决办法：

function getStyle(cssObj,attr){
    if(cssObj.currentStyle){
        return cssObj.currentStyle[attr];//针对ie浏览器获取非行间样式
    }else{
        return getComputedStyle(cssObj,false)[attr];//针对非ie浏览器获取非行间样式
    };
}

2，事件对象的兼容问题

• IE浏览器： window.event
• 其他浏览器：对象.on事件 = function(event){}
• 解决办法：

function fn(eve){
    var e = eve || window.event;
}

3，事件冒泡的兼容问题

• IE浏览器： eve.cancelBubble = true;
• 其他浏览器：eve.stopPropagation();
• 解决办法：

function stopBubbles(e){
    if(e.stopPropagation){
        //针对非ie浏览器
        e.stopPropagation();
    }else{
        //针对ie浏览器
        e.cancelBubbles = true;
    }
} 

4，浏览器默认行为的兼容问题

• IE浏览器： window.event.returnValue = false;
• 其他浏览器：e.preventDefault();
• 解决办法：

if( e.preventDefault ){
    //针对非ie浏览器
    e.preventDefault();
}else{
    //针对ie浏览器
    window.event.returnValue = false;
}

5，事件委托的兼容问题

• IE浏览器： e.srcElement;
• 其他浏览器： e.target;
• 解决办法：

dom.onclick = function(eve){
    var e = eve || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName == "LI"){
        console.log(target.innerHTML);
    }
}

6，事件绑定方式的兼容问题

• 赋值式: (DOM 0级事件绑定)没兼容问题
  • element["on"+type] = back;
• 监听式: (DOM 2级事件绑定)
  • IE浏览器: element.attachEvent("on"+type,back)
  • 其他浏览器 : element.addEventListener(type,back)
• 解决办法

function addEvent(ele,type,back){
    if(ele.addEventListener){
        //监听式:其他浏览器
        ele.addEventListener(type,back)
    }else if(ele.attachEvent){
        //监听式:IE浏览器
        ele.attachEvent("on"+type,back)
    else{
        //赋值式
        ele["on"+type] = back;    　　　
    }
}

7，删除事件绑定的兼容问题

• 赋值式: (DOM 0级事件绑定)没兼容问题
  • element["on"+type] = null;
• 监听式: (DOM 2级事件绑定)
  • IE浏览器: element.detachEvent("on"+type,back)
  • 其他浏览器 : element.removeEventListener(type,back，false)
• 解决办法

function removeEvent(ele,type,back){
    if(ele.removeEventListener){
        //监听式:其他浏览器
        ele.removeEventListener(type,back,false);
    }else if(ele.detachEvent){
        //监听式:IE浏览器
        ele.detachEvent("on" + type,back);
    }else{
        //赋值式
        ele["on"+type] = null;
    }
}

8,键盘事件获取的兼容问题

• IE浏览器: event.which
• 其他浏览器 : event.keycode
• 解决方法

function code(eve){
    var e=eve||window.event;
    var code=e.keyCode||e.which;
}