成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

tab.js分享及瀏覽器兼容性問(wèn)題匯總

twohappy / 3371人閱讀

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

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

tab.js GitHub Clone 地址

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

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

trim（不支持IE6~IE9） 
說(shuō)明：去掉字符串中的空格。
// 以下為兼容寫(xiě)法
String.prototype.trim = function () {
    return this.replace(/^ss*/, "").replace(/ss*$/, "");
}
requestAnimationFrame（不支持IE6~IE9） 
說(shuō)明：它是由瀏覽器專(zhuān)門(mén)為動(dòng)畫(huà)提供的API，效果和setTimeout/setInterval類(lèi)似。
// 以下為兼容寫(xiě)法
var rAF = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) { window.setTimeout(callback, 1000 / 60); };
addEventListener （不支持IE） 
說(shuō)明：為元素綁定事件。
// 以下寫(xiě)法可以兼容大部分情況
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） 
說(shuō)明：引發(fā)事件的DOM元素。
// 以下為兼容寫(xiě)法
target = event.target || event.srcElement;
event.preventDefault （不支持IE6~IE9） 
說(shuō)明：如果事件對(duì)象的cancelable屬性為true，則該方法可以取消事件的默認(rèn)動(dòng)作，但并不取消事件的冒泡行為。（以下為兼容方法）
// 以下為兼容寫(xiě)法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
event.stopPropagation（不支持IE6~IE9） 
說(shuō)明：阻止事件的冒泡行為。
// 以下為兼容寫(xiě)法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);
event.touches.pageX（不支持IE6~IE9） 
說(shuō)明：鼠標(biāo)在頁(yè)面上的位置,從頁(yè)面左上角開(kāi)始,即是以頁(yè)面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化。
// 以下為兼容寫(xiě)法
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)注微信公眾號(hào)「劼哥舍」，老斯基帶你飆車(chē)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79601.html

相關(guān)文章

  • JavaScript文章

    摘要：我對(duì)知乎前端相關(guān)問(wèn)題的十問(wèn)十答張?chǎng)涡駨場(chǎng)涡翊笊駥?duì)知乎上經(jīng)典的個(gè)前端問(wèn)題的回答。作者對(duì)如何避免常見(jiàn)的錯(cuò)誤，難以發(fā)現(xiàn)的問(wèn)題，以及性能問(wèn)題和不好的實(shí)踐給出了相應(yīng)的建議。但并不是本身有問(wèn)題，被標(biāo)準(zhǔn)定義的是極好的。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，可以揍我。 不論你是javascript新手還是老...

    mumumu 評(píng)論0 收藏0

  • 前端最強(qiáng)面經(jīng)匯總

    摘要：獲取的對(duì)象范圍方法獲取的是最終應(yīng)用在元素上的所有屬性對(duì)象即使沒(méi)有代碼，也會(huì)把默認(rèn)的祖宗八代都顯示出來(lái)而只能獲取元素屬性中的樣式。因此對(duì)于一個(gè)光禿禿的元素，方法返回對(duì)象中屬性值如果有就是據(jù)我測(cè)試不同環(huán)境結(jié)果可能有差異而就是。 花了很長(zhǎng)時(shí)間整理的前端面試資源，喜歡請(qǐng)大家不要吝嗇star~ 別只收藏，點(diǎn)個(gè)贊，點(diǎn)個(gè)star再走哈~ 持續(xù)更新中……，可以關(guān)注下github 項(xiàng)目地址 https:...

    wangjuntytl 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

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

    Lowky 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)整理

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

    snowLu 評(píng)論0 收藏0

  • 關(guān)于css兼容性問(wèn)題及一些常見(jiàn)問(wèn)題匯總

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

    seanlook 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<