1.关于使用 event对象，出现的兼容性问题
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参e e.clientX;e.clientY
获取event对象兼容性写法: var oEvent==e||window.event;
var oBox = document.getElementById("box") oBox.onclick = function(e){ e=e||window.event; if(e){ alert(1); } }
获取键码值
document.onkeydown=function(e){ e=e||window.event; var _code=e.keyCode||e.which; }
//举例说明 完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ 30px; height: 30px; background: red; } </style> <script type="text/javascript"> window.onload = function(){ function eventButton(){ var oBox = document.getElementById("box"); oBox.onclick = function(e){//鼠标点击事件 e=e||window.event; console.log(e.button);//输出0 0代表左键 } oBox.oncontextmenu = function(e){//鼠标右击事件 e=e||window.event; console.log(e.button);//输出2 2代表左键 e.preventDefault();//阻止默认事件 非IE e.returnvalue=false;//IE阻止默认事件 //解决兼容 // if(!e.returnvalue){ // e.preventDefault() // }else{ // e.returnvalue=false; // } } } eventButton() } </script> </head> <body> <div id="box"></div> </body> </html>
阻止冒泡兼容问题解决方法
e = e||window.event; if(e.stop Propagation){ e.stopPropagation(); }else{ e.cancleBubble=true; }
2.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
var oDiv =document.getElementById('demo') alert(getComputedStyle(oDiv).height);//不兼容IE8 以下版本 alert(oDiv.currentStyle.height);//兼容IE所有版本,opera if (oDiv.currentStyle){ alert(oDiv.currentStyle.height) }else{ alert(getComputedStyle(oDiv).height); }
举例兼容两个浏览器的写法:
function getStyle(obj,attr){ var arr =attr.match(/w+/g); attr = arr.join(""); console.log(attr); if (obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } oBox.style.height = getStyle(oDiv,"height");
3.关于DOM中 childNodes 获取子节点出现的兼容性问题
childNodes:获取子节点,
--IE6-8:获取的是元素节点,正常
--高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法: 使用nodeType:节点的类型，并作出判断
--nodeType=3-->文本节点
--nodeTyPE=1-->元素节点
例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul'); for(var i=0;i<oUl.childNodes.length;i++){ if(oUl.childNodes[i].nodeType==1){ oUl.childNodes[i].style.background='red'; } }
注：上面childNodes为我们带来的困扰完全可以有children属性来代替。
children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，
比上面的好用所以我们一般获取子节点时,最好用children属性。
var oUl=document.getElementById('ul'); oUl.children.style.background="red";
parentNode不存在兼容问题，通过子元素找父节点
4.关于使用 firstChild,lastChild 等，获取第一个/最后一个元素节点时的兼容
firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点，不兼容IE低版本
firstElementChild,lastElementChild,nextElementSibling,previousElementSibling 高版本浏览器下
--兼容写法:
oBox.firstChild||oBox.fristElementChild
5.添加监听时间addEventListerner/attachEvent 出现的兼容问题
IE8以下低版本: attachEvent('事件名',fn);
FF,Chrome,IE高版本用: attachEventLister('事件名',fn,false/true);
_oBox.addEventListerner("click",function(){
},true)
_oBox.attachEvent("onclick",function(){
},true)
*封装事件监听 目的：解决兼容问题
function packageEventListerner(_current,_type,_deal,_capture){ //_current当前触发的对象 _type触发事件的类型(click,mouseover..),_deal需要处理的函数 ，_capture是否需要捕获 if(_current.addEventListerner){ _current.addEventListerner_type,_deal,_capture) }else{ _current.attachEvent(("on"+_type,_capture) } } //会持续更新 }
7.关于获取滚动条距离而出现的问题
Chrome浏览器document.body
FF,Opera和IE浏览器document.documentElement.scrollTop
兼容处理:
window.onscroll=function(){ document.documentElement.scrollTop||document.body.scrollTop }
//简单举例点击底部回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #bot-scroll{ 34px; height: 35px; margin-left: 1px; position: fixed; background-color: #7a6e6e; right: 10px; bottom: 10px; } body{ height: 5000px; } </style> </head> <body> <div id="bot-scroll"></div> <script type="text/javascript"> var oScroll = document.getElementById('bot-scroll'); window.onscroll =function(){ //底部盒子设置点击事件 oScroll.onclick = function(){ //设置定时器 var timer= setInterval(function(){ var num = document.body.scrollTop - 100;//Chrome var num2 = document.documentElement.scrollTop - 100;//IE //谷歌兼容写法代码开始 if(document.body.scrollTop&&num <= 0){ num = 0; clearInterval(timer); }//结束 //IE兼容写法代码开始 if(document.documentElement.scrollTop&&num2 <= 0){ num2 = 0; clearInterval(timer); } //结束 document.body.scrollTop = num; document.documentElement.scrollTop = num2; },30) } } </script> </body> </html>