我们在使用js操作页面的时候兼容问题是很常见的,下面将常见的兼容问题及其对应的解决方法分享给大家,并持续更新:
1、获取事件对象的兼容写法:
IE中:window.event
正常浏览器中:对象.on事件 = function(event){}//包装函数兼容写法:2、键盘按键获取的兼容写法:
function fn(eve){ var e = eve || window.event; }
//先获取键盘事件对象 var eve = eve || window.event //在通过键盘事件对像获取键盘的 按键信息 //在非IE和IE中的兼容写法 var keyC = eve.keyCode || eve.which
3、
eve.cancelBubble = true; //兼容IE
eve.stopPropagation(); //其他浏览器
1 //封装函数:
function stopBubble(e){ 2 if(e.stopPropagtion){ 3 e.stopPropagtion 4 }else{ 5 eve.cancelBubble = true; 6 } 7 }
4、阻止浏览器默认事件兼容写法:
e.preventDefault(); //兼容IE
window.event.returnValue = false; //常规版 还有一种无兼容问题方法:return false; 加在需要阻止默认事件的程序末尾;//封装函数
function stopDefault(e){ if( e.preventDefault ){ e.preventDefault(); }else{ window.event.returnValue = false; }
}
5、事件的监听式绑定(DOM2级事件绑定)中绑定事件及去除事件的兼容写法:
非IE: oDiv.addEventListener('click',fn,false); //添加事件
oDiv.removeEventListener('click',fn ,false); //删除事件
IE : oDiv.attachEvent(); //添加事件
oDiv.detachEvent() ; //删除事件
1 //封装成两个函数的方式 2 //添加事件 3 function addEvent(obj,inci,back){ 4 if(obj.addEventListener){ 5 obj.addEventListener(inci,back); 6 }else if(obj.attachEvent){ 7 obj.attachEvent("on" + inci,back); 8 }else{ 9 obj["on"+inci] = back; 10 } 11 } 12 //去除事件 13 function removeEvent(obj,inci,back){ 14 if(obj.removeEventListener){ 15 obj.removeEventListener(inci,back,false); 16 }else if(obj.detachEvent){ 17 obj.detachEvent("on" + inci,back); 18 }else{ 19 obj["on"+inci] = null; 20 } 21 }