js中兼容问题的解决

兼容问题

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

 

获取事件对象的兼容

var obox = document.querSelector(".box");

obox.onclick = function(eve) {
           var e = eve || window.event   //ie只支持window.event
           console.log(e);
        }

阻止事件冒泡的兼容

e.stopPropagation

e.cancelBubble = true

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

 监听式绑定的兼容

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

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

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

取消绑定事件的兼容

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

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

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

 获取事件源的兼容

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