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 () experiment    varwinw=document.body.clientwidth| | Document.docuemntElement.clientWidth;//width of visible area of Web page    varwinh=document.body.clientheight| | Document.docuemntElement.clientHeight;//width of visible area of Web page    //The above is not including the width of the border height, if it is offsetwidth or offsetheight, including the border        varwinww=document.body.scrollwidth| | Document.docuemntElement.scrollWidth;//the width of the entire Web page    varwinhh=document.body.scrollheight| | Document.docuemntElement.scrollHeight;//the entire page of high    varscrollheight=document.body.scrolltop| | Document.docuemntElement.scrollTop;//The page is being rolled out of the high    varscrollleft=document.body.scrollleft| | Document.docuemntElement.scrollLeft;//distance of left volume of Web page    varScreenh=window.screen.height;//High Screen resolution    varScreenw=window.screen.width;//width of screen resolution    varScreenx=window.screenleft;//The x-coordinate of the browser window relative to the screen (except Firefox)    varScreenxx=window.screenx;//The x-coordinate of Firefox relative to the screen    varScreeny=window.screentop;//the y-coordinate of the browser window relative to the screen (except Firefox)    varScreenyy=window.screeny;//the y-coordinate of Firefox relative to the screen

Event Incident Issue:

//Event Incident Issuedocument.onclick=function(EV) {//Google Firefox's wording, IE9 above support, down does not support;        varE=ev;    Console.log (e); } Document.onclick=function(){//Google and IE support, Firefox does not support;        varE=event;    Console.log (e); } Document.onclick=function(EV) {//compatible notation;        vare=ev| |window.event; varMousex=e.clientx;//coordinates of the x-axis of the mouse        varMousey=e.clienty;//coordinates of 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    functionNextNode (obj) {//Get next sibling node        if(obj.nextelementsibling) {returnobj.nextelementsibling; } Else{            returnobj.nextsibling;    }; }    functionPrenode (obj) {//get previous sibling node        if(obj.previouselementsibling) {returnobj.previouselementsibling; } Else{            returnobj.previoussibling;    }; }    functionFirstnode (obj) {//get first child node        if(obj.firstelementchild) {returnObj.firstelementchild;//Non-IE678 support}Else{            returnObj.firstchild;//IE678 Support        }; }    functionLastnode (obj) {//get last child node        if(obj.lastelementchild) {returnObj.lastelementchild;//Non-IE678 support}Else{            returnObj.lastchild;//IE678 Support        }; }

Document.getelementsbyclassname questions:

//get elements by class nameDocument.getelementsbyclassname (");//IE 6 7 8 not supported;    //Here you can define a function to solve the compatibility problem, and of course don't mention jquery to me here ...    //The first gets the class name globally, and the second gets the class name as a local    functionByClass1 (Oclass) {//global Fetch, Oclass for the class name you want to find, no "."        varTags=document.all?document.all:document.getelementsbytagname (' * ')); varArr=[];  for(vari = 0; i < tags.length; i++) {            varreg=NewREGEXP (' \\b ' +oclass+ ' \\b ', ' g '); if(Reg.test (tags[i].classname)) {Arr.push (tags[i]);        };        }; returnArr//Notice that the returned array contains all the elements of the class you passed in .    }    functionByClass2 (Parentid,oclass) {//get the class name locally, parentid the parent ID you passed in        varParent=document.getElementById (ParentID); varTags=parent.all?parent.all:parent.getelementsbytagname (' * ')); varArr=[];  for(vari = 0; i < tags.length; i++) {        varreg=NewREGEXP (' \\b ' +oclass+ ' \\b ', ' g '); if(Reg.test (tags[i].classname)) {Arr.push (tags[i]);        };        }; returnArr//Notice that the returned array contains all the elements of the class you passed in .}

Gets the non-inline style values for an element:

// get non-inline style values     for an 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:

//Setting up Listener events     functionAddevent (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, here has been added on, when the reference to the attention not to repeat the addition of        }; }    functionRemoveevent (OBJ,TYPE,FN) {//Delete Event Listener        if(Obj.removeeventlistener) {Obj.removeeventlistener (TYPE,FN,false);//Non-IE}Else{obj.detachevent (' On ' +type,fn);//ie, here has been added on, when the reference to the attention not to repeat the addition of        }; }

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

// It's practical to add an element to the edge of the browser.    function Offsettl (obj) {// Gets the element content distance from the browser border (with 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 as an example    document.onclick=function(e) {        var e=e| | window.event;         if (e.stoppropagation) {            e.stoppropagation (); // Standards        } Else {            e.cancelbubble=true;   IE ....         }    }

To block default events:

// JS block default events    document.onclick=function(e) {        var e=e| | window.event;         if (e.preventdefault) {            e.preventdefault (); // Standards        } Else {            E.returnvalue= ' false ';   IE..         }    }

About target in event events:

// about target    in event events document.onmouseover=function(e) {        var e=e| | 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 go to the place    }

Mouse Wheel Scrolling event:

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

Node loading:

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

The browser compatibility problems and solutions commonly encountered in JS