[JavaScript] Browser compatibility problems and solutions commonly encountered in JS __java

JS frequently encountered browser compatibility problems and solutions today to organize a browser on the compatibility of JS, I hope to bring you help, I did not think of places please leave a message to me, I add; Frequently encountered questions about the wide height of browsers:

//below can be Console.log () experiment var winw=document.body.clientwidth| | document.docuemntelement.clientwidth;//page Visible area wide var winh=document.body.clientheight| | document.docuemntelement.clientheight;//the visible area of the page is wider than the width of the border, if it is offsetwidth or offsetheight, include the border var winww=do cument.body.scrollwidth| | document.docuemntelement.scrollwidth;//wide var winhh=document.body.scrollheight| for the entire page | document.docuemntelement.scrollheight;//full page of high var scrollheight=document.body.scrolltop| | document.docuemntelement.scrolltop;//pages are rolled up high var scrollleft=document.body.scrollleft| | document.docuemntelement.scrollleft;//Page left volume distance var screenh=window.screen.height;//screen resolution high Var Screenw=window.scree n.width;//screen resolution of the wide var screenx=window.screenleft;//browser window relative to the screen x-coordinate (except Firefox) var Screenxx=window.screenx;//firefox phase For the x-coordinate screen, var screeny=window.screentop;//browser window relative to the screen's y-coordinate (except Firefox) var screenyy=window.screeny;//firefox relative to the screen's y-coordinate

Event Incident Issue:

Event incident Issue document.onclick=function (EV) {//Google Firefox writing, IE9 above support, down not support; var E=ev; Console.log (e); } Document.onclick=function () {//Google and IE support, Firefox does not support; var e=event; Console.log (e); } Document.onclick=function (EV) {//compatible notation; var e=ev| | window.event; var mousex=e.clientx;//mouse x-axis coordinate var mousey=e.clienty;//mouse y-axis coordinates }

DOM node-related issues, I encapsulate the functions directly so that you can use them anytime:

DOM node-related, mainly compatible IE 6 7 8 function NextNode (obj) {//Get the next sibling node if (obj.nextelementsibling) {return obj.nextelementsibling; } else{return obj.nextsibling; } function Prenode (obj) {//Get 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 question:

Get element Document.getelementsbyclassname (') by class name;//ie 6 7 8 not supported;//You can define a function to solve the compatibility problem, but don't give me jquery here ...//first for global Class name, second for 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 fetch class name, ParentID for you passed in parent ID V Ar Parent=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 return is also an array containing all the elements of the class you passed in;

Gets the non-row style values for the element:

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

To set up a 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, When you pass the argument, be careful not to repeat the addition of }; } 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 is already added on, and when you pass the argument, be careful not to repeat }; }

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

Here, add an element to the edge of the browser, very useful function Offsettl (obj) {//Get element content distance from the browser border (including 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, here use the Click event as an 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 notation 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;//the mouse to the place }

Mouse Wheel Scrolling event:

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