js常見兼容性問題以及解決方法

時間 2019-11-24

原文原文鏈接

1.關於使用 event對象，出現的兼容性問題
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 傳參e e.clientX;e.clientY
獲取event對象兼容性寫法: var oEvent==e||window.event;javascript

var oBox = document.getElementById("box")
oBox.onclick = function(e){
e=e||window.event;
if(e){
alert(1);
}
}

獲取鍵碼值css

document.onkeydown=function(e){
e=e||window.event;
var _code=e.keyCode||e.which;

}

//舉例說明完整代碼html

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

阻止冒泡兼容問題解決方法java

e = e||window.event;

if(e.stop Propagation){

e.stopPropagation();

}else{

e.cancleBubble=true;

}

2.關於獲取行外樣式 currentStyle 和 getComputedStyle 出現的兼容性問題node

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屬性。
  spa

var oUl=document.getElementById('ul');
    oUl.children.style.background="red";

parentNode不存在兼容問題，經過子元素找父節點

4.關於使用 firstChild,lastChild 等，獲取第一個/最後一個元素節點時的兼容
firstChild,lastChild,nextSibling,previousSibling,獲取第一個元素節點，不兼容IE低版本
firstElementChild,lastElementChild,nextElementSibling,previousElementSibling 高版本瀏覽器下
--兼容寫法: code

oBox.firstChild||oBox.fristElementChild

5.添加監聽時間addEventListerner/attachEvent 出現的兼容問題

IE8如下低版本: attachEvent('事件名',fn);
FF,Chrome,IE高版本用: attachEventLister('事件名',fn,false/true);htm

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。