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>

js常见兼容性问题以及解决方法的更多相关文章

  1. coreseek常见错误原因及解决方法

    coreseek常见错误原因及解决方法 Coreseek 中文全文检索引擎 Coreseek 是一款中文全文检索/搜索软件,以GPLv2许可协议开源发布,基于Sphinx研发并独立发布,专攻中文搜索和 ...

  2. ADB几种常见的错误及解决方法

    下面列举出几种常见的错误及解决方法. Q1:无效的安装包,安装包已损坏[INSTALL_FAILED_INVALID_APK] A1:请检查安装包是否完整.如果是xpk包,可以通过 手动安装xpk来检 ...

  3. JS 无法清除Cookie的解决方法

    JS 无法清除Cookie的解决方法   项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 doc ...

  4. JAVA常见中文问题的解决方法(转)

    JAVA常见中文问题的解决方法 http://www.java-cn.com/club/article-5876-1.html 以下解决方案是笔者在日常生活中遇到的,希望能对你解决JAVA中文问题有所 ...

  5. Excel公式的常见错误值及其解决方法

    Excel公式的常见错误值及其解决方法 经常用Excel的朋友可能都会遇到一些莫名奇妙的错误值信息:# N/A!.#VALUE!.#DIV/O!等等,出现这些错误的原因有很多种,如果公式不能计算正确结 ...

  6. JS高程中的垃圾回收机制与常见内存泄露的解决方法

    起因是因为想了解闭包的内存泄露机制,然后想起<js高级程序设计>中有关于垃圾回收机制的解析,之前没有很懂,过一年回头再看就懂了,写篇博客与大家分享一下. #内存的生命周期: 分配你所需要的 ...

  7. 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）

    笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...

  8. 移动端遇到的常见JS与CSS问题及解决方法

    由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...

  9. [转]IE和Firefox兼容性问题及解决方法

    今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错.IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下: 1.兼容firefox的 outerHTML,FF中 ...

随机推荐

  1. MySQL编译安装及启动

    前言:源码预编译MySQL数据库,使用时cmake 方式,MySQL数据库官方出的数据库编译命令,和普通源码安装软件不同 (configure). CMake是一个跨平台的安装(编译)工具,可以用简单 ...

  2. extern和static区别

    1. 声明和定义 ​ 当定义一个变量的时候,就包含了对该变量声明的过程,同时在内存张申请了一块内存空间.如果在多个文件中使用相同的变量,为了避免重复定义,就必须将声明和定义分离开来.定义是创建与名字关 ...

  3. 基于SpringBoot的Web API快速开发基础框架

    其实还是很因为懒,才会有这个案例项目的产生,每次开启一个终端的小服务都要整理一次框架,造成重复的.不必要的.缺乏创造性的劳动,SO,本着可以用.用着简单的原则上传代码到Github,希望有需要的朋友直 ...

  4. 雅阁微信群、雅阁车友群、十代雅阁交流微信QQ群

    最近一直在关注第十代雅阁,不论是普通汽油版本还是油电混动版本都很不错,在网上看到很多评测文章和视频 后续都会整理发布到微信群中. 由于论坛发帖,博客发文都不是很方便,为了及时沟通,先创建了微信群,方便 ...

  5. 使用cmd打开磁盘目录和文件

    例如: 1.进入e盘 2.查看E盘下所有文件 3.进入指定文件夹

  6. python笔记(2)--字符串

    一.字符串 字符串是不可变序列,具有序列的公共操作方法,具体操作见python笔记(1)--序列(列表 元组 range) 1.创建字符串 单引号:'Hello , I am Logan ! ' 双引 ...

  7. jekyll搭建个人博客2

    目录 个性化 jekyll目录结构 修改个人信息 修改头像 修改背景颜色 关于头像的效果 图片问题 域名 个性化 jekyll目录结构 个性化就是要对文件内容作出修改,使得博客外观发生变化,在修改文件 ...

  8. shell_chmod与目录权限

    此篇文档将讲解关于linux中文件权限常用命令chmod.为了达到一个比较好的效果,我会在需要的地方实际上机验证测试,并截图给朋友们看.我的linux机器装的是(opensuse-11.3),并且以文 ...

  9. 0x31 prime distance（质数）

    题目描述: 给定两个整数L和U,你需要在闭区间[L,U]内找到距离最接近的两个相邻质数C1和C2(即C2-C1是最小的),如果存在相同距离的其他相邻质数对,则输出第一对. 同时,你还需要找到距离最远的 ...

  10. 【最短路算法例题-升降梯上】-C++

    描述 启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨大手柄. Nescafe之塔一共有N层,升降 ...