1. 程式人生 > >CSS瀏覽器相容性寫法、JS瀏覽器相容性寫法

CSS瀏覽器相容性寫法、JS瀏覽器相容性寫法

一、瀏覽器的核心

IE:trident核心

Firefox(火狐):gecko核心

Chrome:Blink(基於Webkit)

Safari:Webkit核心

Oprea:現用Blink,以前是presto核心

二、CSS瀏覽器相容性

-moz-   火狐

-o-        opera早期

-webkit-     谷歌、safari

-ms-    IE

三、JS瀏覽器相容的寫法

瀏覽器相容問題有很多,包括個瀏覽器元素查詢問題、DOM操作以及事件。下面列舉幾種常見JS事件的相容性寫法。

1、js阻止預設事件

var e = event ? || window.event;  簡寫形式: var e=e || window.event;

//如果存在event,那麼var e=event;如果不存在event,那麼var e=window.event,為了實現多種瀏覽器相容

//js阻止預設事件
document.onclick = function(e){
    var e = event ? || window.event;
    if(e.preventDefault){
        e.preventDefault();  //W3C標準
    } else {
        e.returnValue = fasle; //IE
    } 
}

2、阻止事件冒泡事件

//阻止冒泡事件
document.onclik = function(e){
    var e = e || window.event;
    if(e.stopPropagation){
        e.stopPropagation(); //W3C
    } else {
        e.cancelBlue = true;
    }
}

3、獲取事件及事件物件目標

getEvent:function(e){
    return e || window.event;
};
getTarget:function(e){
    return e.target || event.srcElement;
};

 4、新增事件方法

addHandler:function(element,type,handler){
    if(element.addEventListener){        //檢測是否為DOM2級方法
        element.addEventListener(type, handler, false);
    }else if (element.attachEvent){      //檢測是否為IE級方法
        element.attachEvent("on" + type, handler);
    } else {                            //檢測是否為DOM0級方法
        element["on" + type] = handler;
    };
};