谈谈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 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
JS实现根据当前文字选择返回被选中的文字
May 21 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
eclipse php wamp配置教程
2016/06/30 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
Python读写ini文件的方法
2015/05/28 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python用requests实现http请求代码实例
2019/10/31 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
车辆维修工自我评价怎么写
2013/09/20 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
《自选商场》教学反思
2014/02/14 职场文书
安全责任书范文
2014/03/12 职场文书
环保倡议书
2014/04/14 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS