tab.js共有及びブラウザの互換性問題のまとめ

スタイル共有-frozen.jsベースのモバイルOA記事では、第三者のコンポーネントtab.js(メニュー付きの横画面スライドプラグイン)に使用されています.その互換性は非常に悪く、最適化された後、全プラットフォームに対応しています.

tab.js GitHub Clonアドレス

IE 6~IE 9ブラウザーの互換性の問題は奥行だと聞いていましたが、今回はやっと実感しました.今回の最適化tab.jsについては、IE 6~IE 9と互換性がないと、仕事量は倍に減少します.
ここでは、各種ブラウザの互換性についてまとめてみます.
trim(IE 6~IE 9はサポートされていません.)
説明:文字列の空欄を削除します.

//        
String.prototype.trim = function () {
    return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}

request Animation Frame(IE 6~IE 9はサポートされていません)
説明:それはブラウザによってアニメーションのために提供されるAPIで、効果はsetTimeout/set Intervalと似ています.

//        
var rAF = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) { window.setTimeout(callback, 1000 / 60); };

addEvent Listener(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(IE 6~IE 9はサポートされていません)
説明:事件を引き起こすDOM元素.

//        
target = event.target || event.srcElement;

event.prevent Default(IE 6~IE 9はサポートされていません)
説明:イベントオブジェクトのキャンセル属性がtrueであれば、この方法はイベントのデフォルト動作をキャンセルすることができますが、イベントの泡立ちはキャンセルされません.(以下、互換方法)

//        
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

event.stopPropagation(IE 6~IE 9はサポートされていません)
説明:事件の突発行為を阻止する.

//        
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = false);

event.touches.pageX(IE 6~IE 9は対応していません)
説明:マウスのページ上の位置は、ページの左上から始まります.つまり、ページを基準として、スライダーの移動に応じて変化しません.

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

WeChat公式アカウント「劼哥舎」に注目してください.