tab.js分享及瀏覽器兼容性問題彙總

在 樣式佈局分享-基於frozen.js的移動OA 文章中，用了到第三方組件 tab.js(帶菜單的橫屏滑動插件)，其兼容性很差，進行優化後，已兼容全平臺（且支持IE6+）。

• tab.js GitHub Clone 地址

一直聽說過IE6~IE9瀏覽器的兼容性問題是深坑，這次終於有所體會，就本次優化tab.js而言，如果不對IE6~IE9進行兼容，工作量可以減少一倍。

特此把遇到的各種瀏覽器兼容性問題進行彙總，希望對大家有所幫助。

trim（不支持IE6~IE9）

說明：去掉字符串中的空格。

// 以下爲兼容寫法
String.prototype.trim = function () {
    return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

requestAnimationFrame（不支持IE6~IE9）

說明：它是由瀏覽器專門爲動畫提供的API，效果和setTimeout/setInterval類似。

// 以下爲兼容寫法
var rAF = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) { window.setTimeout(callback, 1000 / 60); };

addEventListener （不支持IE）

說明：爲元素綁定事件。

// 以下寫法可以兼容大部分情況
var addHandler = function(el, type, handler, args) {
    if (el.addEventListener) {
        el.addEventListener(type, handler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, handler);
    } else {
        el['on' + type] = handler;
    }
};
var removeHandler = function(el, type, handler, args) {
    if (el.removeEventListener) {
        el.removeEventListener(type, handler, false);
    } else if (el.detachEvent) {
        el.detachEvent('on' + type, handler);
    } else {
        el['on' + type] = null;
    }
};

event.target （不支持IE6~IE9）

說明：引發事件的DOM元素。

// 以下爲兼容寫法
target = event.target || event.srcElement;

event.preventDefault （不支持IE6~IE9）

說明：如果事件對象的cancelable屬性爲true，則該方法可以取消事件的默認動作，但並不取消事件的冒泡行爲。（以下爲兼容方法）

// 以下爲兼容寫法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

event.stopPropagation（不支持IE6~IE9）

說明：阻止事件的冒泡行爲。

// 以下爲兼容寫法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);

event.touches.pageX（不支持IE6~IE9）

說明：鼠標在頁面上的位置,從頁面左上角開始,即是以頁面爲參考點,不隨滑動條移動而變化。

// 以下爲兼容寫法
var touches = e.touches ? e.touches[0] : e;
var pageX = (touches.pageX) ? touches.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var pageY = (touches.pageY) ? touches.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

歡迎關注微信公衆號「劼哥舍」，老斯基帶你飆車。