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

twohappy 發布于2019-08-19 18:26 / 3354人閱讀

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

在樣式布局分享-基于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(/^ss*/, "").replace(/ss*$/, "");
}

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);

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

GPU云服務器云服務器問題匯總號碼隱私保護常見問題匯總兼容性問題 webrtc兼容性問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79601.html

JavaScript文章

摘要：我對知乎前端相關問題的十問十答張鑫旭張鑫旭大神對知乎上經典的個前端問題的回答。作者對如何避免常見的錯誤，難以發現的問題，以及性能問題和不好的實踐給出了相應的建議。但并不是本身有問題，被標準定義的是極好的。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老...

mumumu 2019-08-22 13:50 評論0 收藏0
前端最強面經匯總

摘要：獲取的對象范圍方法獲取的是最終應用在元素上的所有屬性對象即使沒有代碼，也會把默認的祖宗八代都顯示出來而只能獲取元素屬性中的樣式。因此對于一個光禿禿的元素，方法返回對象中屬性值如果有就是據我測試不同環境結果可能有差異而就是。花了很長時間整理的前端面試資源，喜歡請大家不要吝嗇star~ 別只收藏，點個贊，點個star再走哈~ 持續更新中……，可以關注下github 項目地址 https:...

wangjuntytl 2019-08-26 10:41 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

Lowky 2019-08-22 11:22 評論0 收藏0
前端知識點整理

摘要：難怪超過三分之一的開發人員工作需要一些知識。但是隨著行業的飽和，初中級前端就業形勢不容樂觀。整個系列的文章大概有篇左右，從我是如何成為一個前端工程師，到各種前端框架的知識。為什么 call 比 apply 快？這是一個非常有意思的問題。作者會在參數為3個（包含3）以內時，優先使用 call 方法進行事件的處理。而當參數過多（多余3個）時，才考慮使用 apply 方法。這個的原因...

snowLu 2019-08-29 14:05 評論0 收藏0
關于css兼容性問題及一些常見問題匯總

摘要：解決辦法添加復制內容到剪貼板一行右側第一個元素有雙邊距一行左側第一個元素有雙邊距在，下，自身沒浮動，但是的內容有浮動，下邊就會產生一個間隙解決辦法給加浮動給加注意當下最小高度問題，和的間隙問題共存的時候，給加浮動才能解決。目前主流瀏覽器的兼容性做的都比較好了，本文主要針對IE6，7的不兼容問題進行解決。 1.圓盤時鐘有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下...

seanlook 2019-04-23 11:43 評論0 收藏0