The browser compatibility problems and solutions commonly encountered in JS

Today to tidy up the browser on the compatibility of JS, I hope to bring you help, I did not think of the place please leave a message to me, I added;

Frequently encountered on the browser of the wide-height problem:

The following can be Console.log () experimental    var winw=document.body.clientwidth| | document.docuemntelement.clientwidth;//Web page visible area wide    var winh=document.body.clientheight| | document.docuemntelement.clientheight;//Web page Visible area width    //above is not including the width of the border height, if it is offsetwidth or offsetheight, including the border        var winww=document.body.scrollwidth| | document.docuemntelement.scrollwidth;//wide var winhh=document.body.scrollheight| for entire Web page    | document.docuemntelement.scrollheight;//High Var scrollheight=document.body.scrolltop| for the entire page    | document.docuemntelement.scrolltop;//Web page is rolled away high    var scrollleft=document.body.scrollleft| | document.docuemntelement.scrollleft;//the distance from the left volume of the Web page    var screenh=window.screen.height;//high    var screenw= screen resolution window.screen.width;//the wide var of the screen resolution    screenx=window.screenleft;//The x-coordinate of the browser window relative to the screen (except Firefox)    var screenxx= Window.screenx;//firefox x-coordinate with respect to the screen    var screeny=window.screentop;//browser window relative to the screen's y-coordinate (except Firefox)    var Screenyy=window.screeny;//firefox y-coordinate relative to the screen

Event Incident Issue:

Event issue    document.onclick=function (EV) {//Google Firefox's writing, IE9 above support, downward not supported;        var E=ev;        Console.log (e);    }    Document.onclick=function () {//Google and IE support, Firefox not supported;        var e=event;        Console.log (e);    }    Document.onclick=function (EV) {//compatible notation;        var e=ev| | window.event;        var mousex=e.clientx;//the coordinates of the mouse x-axis        var mousey=e.clienty;//the y-axis of the mouse    }

DOM node-related issues, I encapsulate the function directly so that it can be used at any time:

DOM node related, mostly compatible with IE 6 7 8    function NextNode (obj) {//Get Next sibling node        if (obj.nextelementsibling) {            return obj.nextelementsibling;        } else{            return obj.nextsibling;}        ;    }    function Prenode (obj) {//Gets the previous sibling node        if (obj.previouselementsibling) {            return obj.previouselementsibling;        } else{            return obj.previoussibling;}        ;    }    function Firstnode (obj) {//Get first child node        if (obj.firstelementchild) {            return obj.firstelementchild;//non-IE678 support        } else{            return obj.firstchild;//ie678 support        };    }    function Lastnode (obj) {//Get last child node        if (obj.lastelementchild) {            return obj.lastelementchild;//non-IE678 support        } else{            return obj.lastchild;//ie678 support        };    }

Document.getelementsbyclassname questions:

Gets the element Document.getelementsbyclassname (") by the class name;//ie 6 7 8 is not supported;//Here you can define a function to solve the compatibility problem, of course, don't mention jquery to me here ...//The first one to get the class name globally,        The second one is for the local Get class name function ByClass1 (oclass) {//global fetch, Oclass for the class name you want to find, no "."        var tags=document.all?document.all:document.getelementsbytagname (' * ');        var arr=[];            for (var i = 0; i < tags.length; i++) {var reg=new RegExp (' \\b ' +oclass+ ' \\b ', ' G ');            if (Reg.test (Tags[i].classname)) {Arr.push (tags[i]);        };        }; Return arr;//Note that the returned array contains all the elements of the class you passed in,} function ByClass2 (parentid,oclass) {//Local get class name, ParentID for you passed in the parent ID var p        Arent=document.getelementbyid (ParentID);        var tags=parent.all?parent.all:parent.getelementsbytagname (' * ');        var arr=[];            for (var i = 0; i < tags.length; i++) {var reg=new RegExp (' \\b ' +oclass+ ' \\b ', ' G ');            if (Reg.test (Tags[i].classname)) {Arr.push (tags[i]);        };        }; Return arr;//Note that the returned array also contains the C you passed in.Lass all elements;} 

Gets the non-inline style values for an element:

Gets the non-inline style value of the element     function GetStyle (object,ocss) {             if (object.currentstyle) {                 return object.currentstyle[ ocss];//ie             }else{                 return getComputedStyle (object,null) [ocss];//except IE             }     }

To set the Listener event:

Set Listener event     function addevent (OBJ,TYPE,FN) {//Add event listener, three parameters are object, event type, event handler, default is False        if (Obj.addeventlistener {            Obj.addeventlistener (type,fn,false);///Non IE        } else{            obj.attachevent (' on ' +type,fn);//ie, this has been added on, Be careful not to repeat when you pass the argument.        }    function Removeevent (OBJ,TYPE,FN) {//delete event listener        if (obj.removeeventlistener) {            Obj.removeeventlistener (type,fn , false);//non-IE        } else{            obj.detachevent (' on ' +type,fn);//ie, this has been added on, please do not repeat when you pass the arguments        };    }

The distance from the element to the edge of the browser:

This adds an element to the edge of the browser, very useful    function Offsettl (obj) {//Gets the element content distance from the browser border (including the border)        var ofl=0,oft=0;        while (obj) {            ofl+=obj.offsetleft+obj.clientleft;            Oft+=obj.offsettop+obj.clienttop;            obj=obj.offsetparent;        }        Return{left:ofl,top:oft};    }

To prevent event propagation:

JS Block event propagation, where the click event is used for example    document.onclick=function (e) {        var e=e| | window.event;        if (e.stoppropagation) {            e.stoppropagation ();//W3C standard        }else{            e.cancelbubble=true;//ie ...        }    }

To block default events:

JS block default Event    Document.onclick=function (e) {        var e=e| | window.event;        if (e.preventdefault) {            e.preventdefault ();//W3C standard        }else{            e.returnvalue= ' false ';//ie..        }    }

About target in event events:

About Target    document.onmouseover=function (e) {var e=e| in event Events        | window.event;        var target=e.target| | e.srcelement;//gets the compatible wording for target, followed by IE        var from=e.relatedtarget| | e.formelement;//Mouse to the place, the same back for IE ...        var to=e.relatedtarget| | e.toelement;//mouse to go to the place    }

Mouse Wheel Scrolling event:

Mouse wheel Event    //scroll wheel event Document.addeventlistener in Firefox    ("Dommousescroll", function (event) {        alert (event.detail )///If roll forward is-3, then roll 3    },false)    //non-Firefox roller event    document.onmousewheel=function {        alert ( Event.detail);//Roll forward: 120, Roll back: -120    }

Node loading:

Firefox under the unique node loading event, that is, the node loading is executed, and onload different    //feel the use of not much, directly put the JS code behind the page structure can be achieved.    document.addeventlistener (' domcontentloaded ', function () {},false);//dom loading is complete. It seems to be possible except ie6-8.

Reprinted from: http://www.cnblogs.com/duenyang/p/6066737.html

The browser compatibility problems and solutions commonly encountered in JS