js常见兼容性问题以及解决方法

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{
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>

 

 

阻止冒泡兼容问题解决方法

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{ 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>

 

posted @ 2017-02-28 20:50  _skylar  阅读(964)  评论(1)  编辑  收藏  举报