js中兼容问题的解决

兼容问题

获取事件对象
阻止事件冒泡
监听式绑定
取消事件绑定
获取事件源
阻止默认事件
获取非行内样式
获取键盘按键

获取事件对象的兼容

1 var obox = document.querSelector(".box");
2 
3 obox.onclick = function(eve) {
4            var e = eve || window.event   //ie只支持window.event
5            console.log(e);
6         }

阻止事件冒泡的兼容

e.stopPropagation

e.cancelBubble = true

1 function stopBubble(e){    //传入事件对象
2         if(e.stopPropagation){
3             e.stopPropagation();
4         }else{
5             e.cancelBubble = true;   //如果ie,则使用e.cancleBubble
6         }
7     }

监听式绑定的兼容

ele.addEventListener("click",function(){})

ele.attachEvent("onclick",function(){})

1 function addEvent(ele,type,cb){   //元素对象  事件类型  事件函数
2         if(ele.addEventListener){    
3             ele.addEventListener(type,cb)    //ie不支持
4         }else if(ele.attachEvent){
5             ele.attachEvent("on"+type,cb)   //仅ie9支持
6         }else{
7             ele["on"+type] = cb;   //都不支持,使用赋值式绑定
8         } 
9     }

取消绑定事件的兼容

ele.removeEventListener("click",function(){})

ele.detachEvent("onclick",function(){})

1 function removeEvent(ele,type,cb){   //元素对象  事件类型  事件函数
2         if(ele.removeEventListener){    
3             ele.removeEventListener(type,cb)   //ie不支持
4         }else if(ele.detachEvent){
5             ele.detachEvent("on"+type,cb)   //ie支持
6         }else{
7             ele["on"+type] = null;   //都不支持,采用删除赋值式事件绑定
8         }
9     }

获取事件源的兼容

var t = e.target || e.srcElement;

阻止默认事件的兼容

1.document.oncontextmenu = function(){
　　　　return false; //没有兼容的阻止默认事件(位置不对的话有阻止程序的隐患)
} //右键点击

2.e.returnValue = false; //ie
3.e.preventDefault(); //正常浏览器

if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }

获取非行内样式的兼容

getComputedStyle(元素,false)[属性名]
元素.currentStyle[属性名]

获取键盘按键的兼容

 var e = e.keyCode || e.which