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