Javascript 不同浏览器差异和兼容方法

浏览器兼容性是由多个不同浏览器同时存在导致的（浏览器内核、版本不同），这些浏览器在处理一个相同的页面时，表现有时会有差异，作为一个前端开发，处理兼容问题就成了我们必不可少的任务之一，下面将介绍一些处理JavaScript兼容性的方法。

 

1. 找子标签的问题

问题描述:

    1). childNodes, firstChild, lastChild会将两个标签之间的换行也当作文本节点

    2). firstElementChild/lastElementChild在IE中只支持IE9及以上

    3). children只包含所有的标签子节点, 在规范中没有, 但所有的浏览器都支持

 

解决办法:

    1). 如果找子标签, 使用children

    2). 如果找标签体文本, 使用innerHTML

 

2. 获取兄弟标签的问题

问题描述

    1.nextElementSibling/previousElementSibling, 对IE只支持IE9及以上

    2. nextSibling/previousSibling : 返回是标签之间的换行文本节点

 

解决:

var preEle = ele.previousSibling;
if(preEle.nodeType === 3) { 
    //如果是文本节点类型, 再找上一个兄弟
  preEle = preEle.previousSibling;
}

 

3. event

问题描述:

    event对象创建好后, 浏览器处理的方式不相同

    1). 非标准IE只是将event对象保存为window的属性

    2). chrome除了保存, 还将event作用函数传给回调方法了

    3). firfox只是将event作用函数传给回调方法了

解决：

event = event || window.event;
// 或者简写如下
ev = ev || event;

 

4. 滚动条坐标

问题描述:

    在获取当前的滚动坐标时, 不同的浏览器不一样

    1). chrome: document.body.scrollTop

    2). 其它: document.documentElement.scrollTop

    3). 一种浏览器只支持一种写法, 另一种写法返回0

解决:

var sTop =document.body.scrollTop + document.documentElement.scrollTop
//PS: scrollLeft值同理

 

5. 添加事件监听器的函数

问题描述:

    标准：obj.addEventListener(事件名称，事件函数，是否捕获);

       1.有捕获

       2.事件名称没有on

       3.this触发该事件的对象

    IE：obj.attachEvent(事件名称，事件函数);

       1.没有捕获

       2.事件名称有on

       3.this指向window

   

解决:

/*
 * 需求: 编写一个通用函数给指定UI对象设置指定的监听
 */
function bind (obj, eventName, fun) {
  if(document.addEventListener) {
    obj.addEventListener(eventName, fun, false);
  } else {
    obj.attachEvent("on"+eventName, function() {
      fun.call(obj);
    });
  }
}

           

6. 取消事件的默认行为

问题描述:

    在操作一些页面元素时会导致一些默认行为

    比如: 点击<a>转向链接, 滑动滚轮页面滚动

 

解决:

function stopDefault(e) {
  // 阻止默认浏览器动作(W3C)
  if ( e && e.preventDefault ) {
    e.preventDefault();
  } else {
    // IE中阻止函数器默认动作的方式
    window.event.returnValue = false;
  }
  return false;
}

 

7. 给元素添加滚轮滚动监听

问题描述:  不同的浏览添加滚动监听的方式不一样

ie/chrome : onmousewheel

  用event.wheelDelta获取

       上：120

       下：-120

firefox :DOMMouseScroll 必须用addEventListener

   event.detail

       上：-3

       下：3

 

解决如下:

if(document.body.onmousewheel == undefined) {
    //firefox
  document.body.addEventListener("DOMMouseScroll", fun, false);
} else { //IE和chrome
  document.body.onmousewheel = fun;
}

 

8. typeof 函数

问题: 非标准IE中返回object

解决: 函数 instanceof Function 看是否返回true