谈谈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实现的页内搜索代码
May 23 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
详解React-Todos入门例子
Nov 08 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
vue实现在线翻译功能
Sep 27 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 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中Date获取时间不正确怎么办
2008/06/05 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
详解php中的implements 使用
2017/06/13 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
破解Session cookie的方法
2006/07/28 Javascript
use jscript List Installed Software
2007/06/11 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
fullpage.js最后一屏滚动方式
2018/02/06 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JavaScript面向对象核心知识与概念归纳整理
2020/05/09 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
python实现超级马里奥
2020/03/18 Python
python怎么对数字进行过滤
2020/07/05 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
给妈妈洗脚活动方案
2014/08/16 职场文书
小学假期安全广播稿
2014/09/28 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
python实现简单的聊天小程序
2021/07/07 Python