谈谈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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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
在字符串中把网址改成超级链接
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python图书管理系统
2020/04/05 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
施工资料员岗位职责
2014/01/06 职场文书
警校毕业生自我评价
2014/04/06 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
在校生证明
2015/06/17 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
python实现自动化群控的步骤
2021/04/11 Python
python实现自定义日志的具体方法
2021/05/28 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android