广州市源硕化工有限公司

今天小编跟大家讲解下有关浅谈Javascript中浏览器兼容的问题 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈Javascript中浏览器兼容的问题 的相关资料，希望小伙伴们看了有所帮助。

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前 首先要了解什么是能力检测 它是来检测浏览器有没有这种能力 即判断当前浏览器是否支持要调用的属性或者方法。下面做了一些简短的介绍。

1、innerText 和 innerContent1）innerText 和 innerContent 的作用相同2）innerText IE8之前的浏览器支持3）innerContent 老版本的Firefox支持4）新版本的浏览器两种方式都支持

Javascript Code复制内容到剪贴板 //老版本浏览器兼容innerText和innerContent if(element.textContent){ returnelement.textContent; }else{ returnelement.innerText; }

2、获取兄弟节点/元素的兼容性问题

1）兄弟节点 所有浏览器都支持

①nextSibling 下一个兄弟节点 可能是非元素节点；会获取到文本节点

②previousSibling 上一个兄弟节点 可能是非元素节点；会获取到文本节点

2）兄弟元素 IE8以前不支持

①previousElementSibling 获取上一个紧邻的兄弟元素 会忽略空白

②nextElementSibling 获取下一个紧邻的兄弟元素 会忽略空白

Javascript Code复制内容到剪贴板 //兼容浏览器 //获取下一个紧邻的兄弟元素 functiongetNextElement(element){ //能力检测 if(element.nextElementSibling){ returnelement.nextElementSibling; }else{ varnode=element.nextSibling; while(node&&node.nodeType!==1){ node=node.nextibling; } returnnode; } }

Javascript Code复制内容到剪贴板 functiongetPreviousElement(element){ if(element.previousElementSibling){ returnelement.previousElementSibling; }else{ varel=element.previousSibling; while(el&&el.nodeType!==1){ el=el.previousSibling; } returnel; } }Javascript Code复制内容到剪贴板 functiongetFirstElement(parent){ if(parent.firstElementChild){ returnparent.firstElementChild; }else{ varel=parent.firstChild; while(el&&el.nodeType!==1){ el=el.nextSibling; } returnel; } }Javascript Code复制内容到剪贴板 functiongetLastElement(parent){ if(parent.lastElementChild){ returnparent.lastElementChild; }else{ varel=parent.lastChild; while(el&&el.nodeType!==1){ el=el.previousSibling; } returnel; } }Javascript Code复制内容到剪贴板 functionsibling(element){ if(!element)return; varelements=[]; varel=element.previousSibling; while(el){ if(el.nodeType===1){ elements.push(el); } el=el.previousSibling; } el=element.previousSibling; while(el){ if(el.nodeType===1){ elements.push(el); } el=el.nextSibling; } returnelements; }

3、array.filter(); // 使用指定的函数测试所有元素 并创建一个包含所有通过测试的元素的新数组

Javascript Code复制内容到剪贴板 //兼容旧环境 if(!Array.prototype.filter) { Array.prototype.filter=function(fun) { "usestrict"; if(this===void0||this===null) thrownewTypeError(); vart=Object(this); varlen=t.length>>>0; if(typeoffun!=="function") thrownewTypeError(); varres=[]; varthisArg=arguments.length>=2?arguments[1]:void0; for(vari=0;i<len;i++) { if(iint) { varval=t[i]; //NOTE:TechnicallythisshouldObject.definePropertyat //thenextindex,aspushcanbeaffectedby //propertiesonObject.prototypeandArray.prototype. //Butthatmethod'snew,andcollisionsshouldbe //rare,sousethemore-compatiblealternative. if(fun.call(thisArg,val,i,t)) res.push(val); } } returnres; }; }

4、array.forEach();// 遍历数组Javascript Code复制内容到剪贴板 //兼容旧环境 //ProductionstepsofECMA-262,Edition5,15.4.4.18 //Reference:http://es5.github.io/#x15.4.4.18 if(!Array.prototype.forEach){ Array.prototype.forEach=function(callback,thisArg){ varT,k; if(this==null){ thrownewTypeError('thisisnullornotdefined'); } //1.LetObetheresultofcallingtoObject()passingthe //|this|valueastheargument. varO=Object(this); //2.LetlenValuebetheresultofcallingtheGet()internal //methodofOwiththeargument"length". //3.LetlenbetoUint32(lenValue). varlen=O.length>>>0; //4.IfisCallable(callback)isfalse,throwaTypeError exception.//See:http://es5.github.com/#x9.11 if(typeofcallback!=="function"){ thrownewTypeError(callback+'isnotafunction'); } //5.IfthisArgwassupplied,letTbethisArg;elselet //Tbeundefined. if(arguments.length>1){ T=thisArg; } //6.Letkbe0 k=0; //7.Repeat,whilek<len while(k<len){ varkValue; //a.LetPkbeToString(k). //ThisisimplicitforLHSoperandsoftheinoperator //b.LetkPresentbetheresultofcallingtheHasProperty //internalmethodofOwithargumentPk. //Thisstepcanbecombinedwithc //c.IfkPresentistrue,then if(kinO){ //i.LetkValuebetheresultofcallingtheGetinternal //methodofOwithargumentPk. kValue=O[k]; //ii.CalltheCallinternalmethodofcallbackwithTas //thethisvalueandargumentlistcontainingkValue,k,andO. callback.call(T,kValue,k,O); } //d.Increasekby1. k++; } //8.returnundefined }; }

5、注册事件Javascript Code复制内容到剪贴板 .addEventListener=function(type,listener,useCapture){}; //第一个参数事件名称 //第二个参数事件处理函数（监听者） //第三个参数true捕获false冒泡 //IE9以后才支持 // 兼容旧环境Javascript Code复制内容到剪贴板 varEventTools={ addEventListener:function(element,eventName,listener){ //能力检测 if(element.addEventListener){ element.addEventListener(eventName,listener,false); }elseif(element.attachEvent){ element.attachEvent("on"+eventName,listener); }else{ element["on"+eventName]=listener; } }, //想要移除事件 不能使用匿名函数 removeEventListener:function(element,eventName,listener){ if(element.removeEventListener){ element.removeEventListener(eventName,listener,false); }elseif(element.detachEvent){//IE8以前注册.attachEvent和移除事件.detachEvent element.detachEvent("on"+eventName,listener); }else{ element["on"+eventName]=null; } } };

6、事件对象

1)事件参数e 就是事件对象 标准的获取方式

btn.onclick = function(e) { }

2)e.eventPhase 事件阶段 IE8以前不支持

3)e.target 始终是触发事件的对象（点击的按钮）

i）IE8以前 srcElement

ii）浏览器兼容

var target = e.target || window.event.srcElement;

Javascript Code复制内容到剪贴板 //获取事件对象兼容浏览器 getEvent:function(e){ returne||window.event;//e事件对象标准的获取方式；window.eventIE8以前获取事件对象的方式 } //兼容target getTarget:function(e){ returne.target||e.srcElement; }

7、获取鼠标在页面上的位置

①在可视区域中的位置： e.clientX e.clientY

②在文档中的位置： i） e.pageX e.pageY

ii）浏览器兼容

Javascript Code复制内容到剪贴板 varscrollTop=document.documentElement.scrollTop||document.body.scrollTop; varpageY=e.clientY+scrollTop;8、获取页面滚动的距离Javascript Code复制内容到剪贴板 //兼容浏览器 varscrollTop=document.documentElement.scrollTop||document.body.scrolltop; 9、取消文本的选择Javascript Code复制内容到剪贴板 //兼容浏览器 window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

以上这篇浅谈Javascript中浏览器兼容的问题就是小编分享给大家的全部内容了 希望能给大家一个参考 也希望大家多多支持爱蒂网。

来源：爱蒂网