js browser compatibility problems common summary

Some JS compatible browser solution

• R & D in the development process because we do not know what version of the user's browser, and therefore often encounter browser compatibility issues, for different browsers, some of js syntax is not the same. Today we'll summarize a part of common browser compatible event, we hope to help

1, to obtain a non-compatible inline style

• IE browser: element.currentStyle [attr];
• Other browsers: getComputedStyle (element, false) [attr]
• Solution:

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

2, the event object compatibility problems

• IE browser: window.event
• Other browsers: Object .on event = function (event) {}
• Solution:

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

3, event bubbling compatibility issues

• IE browser: eve.cancelBubble = true;
• Other browsers: eve.stopPropagation ();
  
• Solution:

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

4, the browser's default behavior of compatibility problems

• IE browser: window.event.returnValue = false;
• Other browsers: e.preventDefault ();
  
• Solution:

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

5, the event delegate compatibility issues

• IE browser: e.srcElement;
• Other browsers: e.target;
• Solution:

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

6, compatibility mode of binding events

• Assignment formula: (DOM 0 level event bindings) no compatibility problems
  • element["on"+type] = back;
• Monitor type: (DOM Level 2 event binding)
  • IE browser: element.attachEvent ( "on" + type, back)
  • Other browsers: element.addEventListener (type, back)
• Solution

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, delete the event binding compatibility issues

• Assignment formula: (DOM 0 level event bindings) no compatibility problems
  • element["on"+type] = null;
• Monitor type: (DOM Level 2 event binding)
  • IE browser: element.detachEvent ( "on" + type, back)
  • Other browsers: element.removeEventListener (type, back, false)
• Solution

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, keyboard events to obtain compatibility issues

• IE browser: event.which
• Other browsers: event.keycode
• Solution

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