JSブラウザの互換性の問題の一般的な概要

いくつかのJS互換性のあるブラウザソリューション

R＆D開発プロセスで、我々は多くの場合、ブラウザの互換性の問題が発生したユーザーのブラウザのバージョン、およびのでわからないので、別のブラウザのために、JS構文の一部は同じではありません。今日、我々は助けることを願って、一般的なブラウザ互換性のあるイベントの一部を要約します

図1に示すように、非互換のインラインスタイルを取得します

IEブラウザ：element.currentStyle [ATTR]。
その他のブラウザ：getComputedStyle（要素、偽）[ATTR]
ソリューション：

function getStyle(cssObj,attr){
    if(cssObj.currentStyle){
        return cssObj.currentStyle[attr];//针对ie浏览器获取非行间样式
    }else{
        return getComputedStyle(cssObj,false)[attr];//针对非ie浏览器获取非行间样式
    };
}

2、イベントオブジェクトの互換性の問題

IEブラウザ：window.event
他のブラウザ：オブジェクト.onイベント=関数（イベント）{}
ソリューション：

function fn(eve){
    var e = eve || window.event;
}

3、互換性の問題をバブリングイベント

IEブラウザ：eve.cancelBubble =はtrue。
その他のブラウザ：eve.stopPropagation（）;
ソリューション：

function stopBubbles(e){
    if(e.stopPropagation){
        //针对非ie浏览器
        e.stopPropagation();
    }else{
        //针对ie浏览器
        e.cancelBubbles = true;
    }
}

4、ブラウザのデフォルトの動作の互換性の問題

IEブラウザ：window.event.returnValue = falseは、
その他のブラウザ：e.preventDefault（）;
ソリューション：

if( e.preventDefault ){
    //针对非ie浏览器
    e.preventDefault();
}else{
    //针对ie浏览器
    window.event.returnValue = false;
}

5、イベントのデリゲートの互換性の問題

IEブラウザ：e.srcElement。
その他のブラウザ：e.target。
ソリューション：

dom.onclick = function(eve){
    var e = eve || window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName == "LI"){
        console.log(target.innerHTML);
    }
}

図6に示すように、結合事象の互換モード

割り当て式：（DOM 0レベルのイベントバインディング）互換性の問題
- バック= [+タイプが "オン"]の要素;
（DOMレベル2イベントバインディング）：タイプを監視
- IEブラウザ：element.attachEvent（ "上" +タイプ、背中）
- その他のブラウザ：（バック型）element.addEventListener
ソリューション

function addEvent(ele,type,back){
    if(ele.addEventListener){
        //监听式:其他浏览器
        ele.addEventListener(type,back)
    }else if(ele.attachEvent){
        //监听式:IE浏览器
        ele.attachEvent("on"+type,back)
    else{
        //赋值式
        ele["on"+type] = back;    　　　
    }
}

7、互換性の問題を結合イベントを削除

割り当て式：（DOM 0レベルのイベントバインディング）互換性の問題
- [+型の "オン"]要素= NULL;
（DOMレベル2イベントバインディング）：タイプを監視
- IEブラウザ：element.detachEvent（ "上" +タイプ、背中）
- その他のブラウザ：element.removeEventListener（タイプ、背中、偽）
ソリューション

function removeEvent(ele,type,back){
    if(ele.removeEventListener){
        //监听式:其他浏览器
        ele.removeEventListener(type,back,false);
    }else if(ele.detachEvent){
        //监听式:IE浏览器
        ele.detachEvent("on" + type,back);
    }else{
        //赋值式
        ele["on"+type] = null;
    }
}

8、互換性の問題を取得するためにキーボードイベント

IEブラウザ：event.which
その他のブラウザ：event.keycode
ソリューション

function code(eve){
    var e=eve||window.event;
    var code=e.keyCode||e.which;
}

JSブラウザの互換性の問題の一般的な概要

いくつかのJS互換性のあるブラウザソリューション

おすすめ