我们在使用js操作页面的时候兼容问题是很常见的,下面将常见的兼容问题及其对应的解决方法分享给大家:

1、获取事件对象的兼容写法:

   IE中:window.event

      正常浏览器中:对象.on事件 = function(event){}      
//包装函数兼容写法:
function fn(eve){
      var e = eve || window.event;
       }
2、键盘按键获取的兼容写法:
//先获取键盘事件对象  
var eve = eve || window.event
//在通过键盘事件对像获取键盘的 按键信息
//在非IE和IE中的兼容写法
var keyC = eve.keyCode || eve.which

3、阻止事件冒泡

  eve.cancelBubble = true;        //兼容IE

  eve.stopPropagation();           //其他浏览器  

 //封装函数:
  function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
eve.cancelBubble = true;
}
}

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() ;   //删除事件

 //封装成两个函数的方式
//添加事件
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
//去除事件
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
05-21 10:12