欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-27 22:54:45
今天整理了一下浏览器对js的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上; 常遇到的关于浏览器的宽高问题: //以下均可console...

今天整理了一下浏览器对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都可以.

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

上一篇:

下一篇: