谈谈JS中常遇到的浏览器兼容问题和解决方法

今天整理了一下浏览器对js的兼容问题，希望能给你们带来帮助，我没想到的地方请留言给我，我再加上；

常遇到的关于浏览器的宽高问题：

//以下均可console.log()实验
  var winw=document.body.clientwidth||document.docuemntelement.clientwidth;//网页可见区域宽
  var winh=document.body.clientheight||document.docuemntelement.clientheight;//网页可见区域宽
  //以上为不包括边框的宽高，如果是offsetwidth或者offsetheight的话包括边框
  
  var winww=document.body.scrollwidth||document.docuemntelement.scrollwidth;//整个网页的宽
  var winhh=document.body.scrollheight||document.docuemntelement.scrollheight;//整个网页的高

  var scrollheight=document.body.scrolltop||document.docuemntelement.scrolltop;//网页被卷去的高
  var scrollleft=document.body.scrollleft||document.docuemntelement.scrollleft;//网页左卷的距离

  var screenh=window.screen.height;//屏幕分辨率的高
  var screenw=window.screen.width;//屏幕分辨率的宽
  var screenx=window.screenleft;//浏览器窗口相对于屏幕的x坐标（除了firefox）
  var screenxx=window.screenx;//firefox相对于屏幕的x坐标
  var screeny=window.screentop;//浏览器窗口相对于屏幕的y坐标（除了firefox）
  var screenyy=window.screeny;//firefox相对于屏幕的y坐标

event事件问题：

//event事件问题
  document.onclick=function(ev){//谷歌火狐的写法，ie9以上支持，往下不支持；
    var e=ev;
    console.log(e);
  }
  document.onclick=function(){//谷歌和ie支持，火狐不支持；
    var e=event;
    console.log(e);
  }
  document.onclick=function(ev){//兼容写法；
    var e=ev||window.event;
    var mousex=e.clientx;//鼠标x轴的坐标
    var mousey=e.clienty;//鼠标y轴的坐标
  }

dom节点相关的问题，我直接封装了函数，以便随时可以拿来使用：

//dom节点相关，主要兼容ie 6 7 8
  function nextnode(obj){//获取下一个兄弟节点
    if (obj.nextelementsibling) {
      return obj.nextelementsibling;
    } else{
      return obj.nextsibling;
    };
  }
  function prenode(obj){//获取上一个兄弟节点
    if (obj.previouselementsibling) {
      return obj.previouselementsibling;
    } else{
      return obj.previoussibling;
    };
  }
  function firstnode(obj){//获取第一个子节点
    if (obj.firstelementchild) {
      return obj.firstelementchild;//非ie678支持
    } else{
      return obj.firstchild;//ie678支持
    };
  }
  function lastnode(obj){//获取最后一个子节点
    if (obj.lastelementchild) {
      return obj.lastelementchild;//非ie678支持
    } else{
      return obj.lastchild;//ie678支持
    };
  }

document.getelementsbyclassname问题：

//通过类名获取元素
  document.getelementsbyclassname('');//ie 6 7 8不支持；

  //这里可以定义一个函数来解决兼容问题，当然别在这给我提jquery...
  //第一个为全局获取类名，第二个为局部获取类名
  function byclass1(oclass){//全局获取，oclass为你想要查找的类名，没有“.”
    var tags=document.all?document.all:document.getelementsbytagname('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
      var reg=new regexp('\\b'+oclass+'\\b','g');
      if (reg.test(tags[i].classname)) {
        arr.push(tags[i]);
      };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
  }

  function byclass2(parentid,oclass){//局部获取类名，parentid为你传入的父级id
    var parent=document.getelementbyid(parentid);
    var tags=parent.all?parent.all:parent.getelementsbytagname('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    var reg=new regexp('\\b'+oclass+'\\b','g');
      if (reg.test(tags[i].classname)) {
        arr.push(tags[i]);
      };
    };
    return arr;//注意返回的也是数组，包含你传入的class所有元素；
   }

获取元素的非行间样式值：

//获取元素的非行间样式值
   function getstyle(object,ocss) {
       if (object.currentstyle) {
         return object.currentstyle[ocss];//ie
       }else{
         return getcomputedstyle(object,null)[ocss];//除了ie
       }
   }

设置监听事件：

//设置监听事件
   function addevent(obj,type,fn){//添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为false
    if (obj.addeventlistener) {
      obj.addeventlistener(type,fn,false);//非ie
    } else{
      obj.attachevent('on'+type,fn);//ie,这里已经加上on，传参的时候注意不要重复加了
    };
  }
  function removeevent(obj,type,fn){//删除事件监听
    if (obj.removeeventlistener) {
      obj.removeeventlistener(type,fn,false);//非ie
    } else{
      obj.detachevent('on'+type,fn);//ie，这里已经加上on，传参的时候注意不要重复加了
    };
  }

元素到浏览器边缘的距离：

//在这里加个元素到浏览器边缘的距离，很实用
  function offsettl(obj){//获取元素内容距离浏览器边框的距离（含边框）
    var ofl=0,oft=0;
    while(obj){
      ofl+=obj.offsetleft+obj.clientleft;
      oft+=obj.offsettop+obj.clienttop;
      obj=obj.offsetparent;
    }
    return{left:ofl,top:oft};
  }

阻止事件传播：

//js阻止事件传播，这里使用click事件为例
  document.onclick=function(e){
    var e=e||window.event;
    if (e.stoppropagation) {
      e.stoppropagation();//w3c标准
    }else{
      e.cancelbubble=true;//ie....
    }
  }

阻止默认事件：

//js阻止默认事件
  document.onclick=function(e){
    var e=e||window.event;
    if (e.preventdefault) {
      e.preventdefault();//w3c标准
    }else{
      e.returnvalue='false';//ie..
    }
  }

关于event事件中的target：

//关于event事件中的target
  document.onmouseover=function(e){
    var e=e||window.event;
    var target=e.target||e.srcelement;//获取target的兼容写法，后面的为ie
    var from=e.relatedtarget||e.formelement;//鼠标来的地方，同样后面的为ie...
    var to=e.relatedtarget||e.toelement;//鼠标去的地方
  }

鼠标滚轮滚动事件：

//鼠标滚轮事件
  //火狐中的滚轮事件
  document.addeventlistener("dommousescroll",function(event){
    alert(event.detail);//若前滚的话为 -3，后滚的话为 3
  },false)
  //非火狐中的滚轮事件
  document.onmousewheel=function(event){
    alert(event.detail);//前滚：120，后滚：-120
  }

节点加载：

//火狐下特有的节点加载事件，就是节点加载完才执行，和onload不同
//感觉用到的不多，直接把js代码放在页面结构后面一样能实现。。
document.addeventlistener('domcontentloaded',function ( ){},false);//dom加载完成。好像除ie6-8都可以.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。