谈谈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 相关文章推荐
JScript分割字符串示例代码
Sep 04 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 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
set_include_path在win和linux下的区别
2008/01/10 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python getopt模块使用实例解析
2019/12/18 Python
python中adb有什么功能
2020/06/07 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
学生感冒英文请假条
2014/02/04 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
Python 多线程处理任务实例
2021/11/07 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS