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

最新推荐文章于 2025-01-28 15:43:14 发布

转载最新推荐文章于 2025-01-28 15:43:14 发布 · 2.1k 阅读

本文详细探讨了前端开发中常见的兼容性问题，包括事件对象、行内样式获取、DOM子节点处理等方面，并提供了多种浏览器兼容性的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 ></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);
}

举例兼容两个浏览器的写法:

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