web開發中的各種瀏覽器的相容問題
最近在學js開發,發現很多瀏覽器相容問題有不同的寫法,記錄一下.
1.css3中的新標籤
比如border-radius,box-shadow
要寫成多瀏覽器相容
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
2.判斷是不是IE瀏覽器
var isIE = navigator.userAgent.indexOf("MISE") > -1; //無法判斷IE11
3.幫定事件的方法
傳統方法:element.onclick = function(e){...}
w3c標準方法:element.addEventListener("click",function(event){...})
IE事件註冊方法:element.attachEvent("onclick",function(){...})
所以可以統一為:
function addEvent(element, event, callbackFunction){
if(element.addEventListener){
element.addEventListener(event, callbackFunction,false);
}else if (element.attachEvent){
element.attachEvent('on'+event,callbackFunction);
}
}
4.跨瀏覽器獲取事件的方法
addEvent(demo,"mouseover",function(e){
var event = e || window.event;//IE瀏覽器用window.event獲取
var target = event.target || event.srcElement; //獲取事件觸發的目標
if (target.className == "...") // 判斷事件觸發的目標,是不是相應的類名
});