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