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("不跳转！");

}