JS 兼容性方法小结

Question

事件

事件对象兼容

ie/chrome : event是一个内置全局对象
标准下 : 事件对象是通过事件函数的第一个参数传入
兼容写法 :   ev = ev||event;

取消事件冒泡兼容

IE8: cancelBubble = true;
非IE: ev.stopPropagation();

阻止默认事件

IE8: 在事件方法尾部 return false;//注意该方法还会阻止冒泡
非IE:    ev.preventDefault();

事件监听兼容

function bindEvent(obj,event,callback){
  if(obj.addEventListener){
    //标准下
    obj.addEventListener(event,callback,false);
  }else{
    //非标准下
    obj.attachEvent('on'+event,function(){  
      callback.call(obj);
    });
  }
}

DOM

children 属性

元素.children : 只读 属性 子节点列表集合
标准下：只包含元素类型的节点
非标准下：只包含元素类型的节点,ie7以下不会包含非法嵌套子节点

parent 节点读取方法

元素.parentNode : 只读 属性 当前节点的父级节点 兼容性很好
元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
该属性判断父级的几个点：
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上

Layout 是 ie7 以下特性 
是否有Layout特性 ：  
doucument.getElementById('').currentStyle.hasLayout;
//true:有 false:没有
alert(document.getElementById('div2').currentStyle.hasLayout );

判断所选元素到 body 的距离：

function getPos(obj)
{
  var pos={left:0,top:0};
  while(obj)
  {
    pos.left += obj.offsetLeft;
    pos.top += obj.offsetTop;
    obj=obj.offsetParent;
  }
  return pos;

}

滚动条距离

//滚动条滚动距离
document.documentElement.scrollTop //非chrome
document.body.scrollTop //chrome
//兼容性方案
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

获取行间样式

function getStyle(obj,name){
  if(obj.currentStyle){
    //IE
    return obj.currentStyle[name];
  }else{
    //标准
    return getComputedStyle(obj,false)[name];
  }
}

AJAX

function ajax(method, url, data, successFn){
  url = (method === 'get') && data ? url+'?'+data : url;
  new xhr = null;
  try {
    xhr = new XMLHttpRequest();
  } catch (e) {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }

  xhr.open(method,url,true);

  if( method === 'get' ){
    xhr.send();
  }else{
    xhr.setRequestHeader('content-type','application/x-www-form-urlencode');
    xhr.send(data);
  }

  xhr.onreadystatechange = function(){
    if( xhr.readyState == 4){
      if(xhr.status === 200){
        successFn&&successFn(xhr.responseText);
      }else{
        alert( '出错了，Err:' + xhr.status + '错误');
      }
    }
  }
}