js常见兼容性问题举例包含完整代码

1.关于使用 event对象,出现的兼容性问题
  
 如: 获取鼠标位置
            IE/Chrom: event.clientX;event.clientY
            FF/IE9以上/Chrom: 传参ev–> ev.clientX;ev.clientY
    获取event对象兼容性写法: var oEvent==e||window.event;
        document.oncilck=function(e){
            var oEvent==e||window.event;
            if(oEvent){
                alert(oEvent.clientX);
            }
        }

//举例说明 完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style type=”text/css”>
#box{
width: 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>

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”);

1.

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.lastElementChild

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(_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{ width: 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>

IT文库 » js常见兼容性问题举例包含完整代码
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址