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


Posted in Javascript onDecember 17, 2016

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

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

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
jQuery文字轮播特效
Feb 12 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 #Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 #Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 #Javascript
深入理解JS继承和原型链的问题
Dec 17 #Javascript
Bootstrap CSS组件之输入框组
Dec 17 #Javascript
原生js验证简洁注册登录页面
Dec 17 #Javascript
javascript 数组去重复(在线去重工具)
Dec 17 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php随机显示图片的简单示例
2014/02/15 PHP
简单分析ucenter 会员同步登录通信原理
2014/08/25 PHP
php中chdir()函数用法实例
2014/11/13 PHP
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
2016/09/20 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现的系统实用log类实例
2015/06/30 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
Python流程控制 if else实现解析
2019/09/02 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
python 连续不等式语法糖实例
2020/04/15 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
采购部部门职责
2013/12/15 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2014年保洁工作总结
2014/11/24 职场文书
初中教师个人工作总结
2015/02/10 职场文书
医生个人年度总结
2015/02/28 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书