js各種瀏覽器兼容問題

IE低版本瀏覽器和其餘瀏覽器通常都不同，爲了實現兼容，能夠採用如下的方法：

 var myDiv = document.getElementById("ID");

/*針對不一樣的瀏覽器採用不一樣的方法*/
if(myDiv.currentStyle){ /*用於區分是什麼類型的瀏覽器 IE*/
var outStyle = myDiv.currentStyle;
console.log(outStyle.left);
}else{ /*用於其餘類型的瀏覽器*/
var outStyle = window.getComputedStyle(myDiv,null);
console.log(outStyle.left);
}

 

/*爲元素添加事件監聽   兼容各類瀏覽器*/
if(div.attachEvent){  //ie瀏覽器
    div.attachEvent("onclick",show);
}else{
    div.addEventListener("click",show,false);
}

/*一樣的道理   爲元素移除事件監聽   兼容各類瀏覽器*/
if(div.detachEvent){
    div.detachEvent("onclick",show);
}else{
    div.removeEventListener("click",show,false);

}

 

當一個父級容器（如div）中包含有幾個子集容器（div）時，任意點擊一個容器（div），都會觸發其餘容器的事件。爲了解決這類問題，示例以下：

//false  事件冒泡（從子元素到父元素）  true：事件捕獲（從父元素到子元素）

div1.addEventListener("click",showConsole1,false);

 function showConsole1(e){
        e = e || window.event;

//        事件冒泡的處理  阻止事件冒泡

        if(e.stopPropagation){
            e.stopPropagation();  //非ie
        }else{
            e.cancelBubble = true;
        }

        console.log("div1");

    }

 

<a href="https://www.baidu.com/" onclick="showBaiDu(event)">衆裏尋他千百度</a>

/*三：取消默認事件*/
function showBaiDu(e){
    if(e.preventDefault){   /*非IE瀏覽器*/
        e.preventDefault();
    }else{                   /*IE瀏覽器*/
        e.returnValue = false;
    }
    console.log("不跳轉！");

}