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>
最新文章
- 【需求设计1】VIP积分系统无聊YY
- Spring+SpringMvc+Mybatis框架集成搭建教程
- JavaScript-String基础知识
- 《C++primer》v5 第4章 表达式 读书笔记 习题答案
- Python Charts库的使用
- 在C++中实现字符串分割--split
- [Java] 转:多线程 (并发)总结
- CodeForces 135 B. Rectangle and Square(判断正方形和 矩形)
- [LeetCode] 42. Trapping Rain Water 解题思路
- Spring各种注解标签作用详解
- 接口(三)——JAVA的多重继承
- iOS多用连接、反向协议、安全
- JavaSE(十二)之IO流的字节流(一)
- ASP.NET Core 异常处理与日志记录
- arcis api for js 值 3.17 本地部署
- 外部tomcat发布springboot项目步骤和异常处理:java.lang.NoClassDefFoundError: javax/el/ELManager
- RuntimeError: cryptography requires setuptools 18.5 or newer, please upgrade to a newer version of setuptool
- Strut2页面传参跳转 --Struts2
- 软件设计、DDD概念及落地时的一些零碎思考和记录2
- Rpgmakermv(5) MiniLabel插件介绍
热门文章
- 2050编程赛 冰水挑战 HDU 6495
- C语言学习书籍推荐《C语言入门经典(第4版)》
- Yii basic 模板支持连接多数据库
- [WPF自定义控件库]了解WPF的布局过程,并利用Measure为Expander添加动画
- java学习笔记(基础篇)—抽象与接口的区别
- Lucene05-分词器
- python基础一整型、bool、字符串
- 题解 P2949 【[USACO09OPEN]工作调度Work Scheduling】
- Helm 3 使用 harbor 作为仓库存储 charts
- bootstrap datatable editor 扩展