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

twohappy 發(fā)布于2019-08-19 18:26 / 3369人閱讀

摘要：地址一直聽說過瀏覽器的兼容性問題是深坑，這次終于有所體會(huì)，就本次優(yōu)化而言，如果不對進(jìn)行兼容，工作量可以減少一倍。特此把遇到的各種瀏覽器兼容性問題進(jìn)行匯總，希望對大家有所幫助。以下為兼容方法以下為兼容寫法不支持說明阻止事件的冒泡行為。

在樣式布局分享-基于frozen.js的移動(dòng)OA 文章中，用了到第三方組件 tab.js(帶菜單的橫屏滑動(dòng)插件)，其兼容性很差，進(jìn)行優(yōu)化后，已兼容全平臺（且支持IE6+）。

tab.js GitHub Clone 地址

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

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

trim（不支持IE6~IE9）

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

// 以下為兼容寫法
String.prototype.trim = function () {
    return this.replace(/^ss*/, "").replace(/ss*$/, "");
}

requestAnimationFrame（不支持IE6~IE9）

說明：它是由瀏覽器專門為動(dòng)畫提供的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）

說明：引發(fā)事件的DOM元素。

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

event.preventDefault （不支持IE6~IE9）

說明：如果事件對象的cancelable屬性為true，則該方法可以取消事件的默認(rèn)動(dòng)作，但并不取消事件的冒泡行為。（以下為兼容方法）

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

event.stopPropagation（不支持IE6~IE9）

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

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

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

說明：鼠標(biāo)在頁面上的位置,從頁面左上角開始,即是以頁面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化。

// 以下為兼容寫法
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);

歡迎關(guān)注微信公眾號「劼哥舍」，老斯基帶你飆車。