JS与jQuery相关兼容问题

原生JS兼容问题

• 事件对象(IE8及以下不支持event)
  var event = event || window.event
• 事件目标(IE支持srcElement，而火狐支持target，谷歌兼容)
  var target = event.target || event.srcElement
• 阻止默认行为
  IE8以上浏览器：event.preventDefault()
  IE8及以下：event.returnValue=false;
  event.preventDefault?event.preventDefault():(event.returnValue = false)
• 阻止冒泡
  IE8以上浏览器：event.stopPropogation()
  IE8及以下：event.cancelBubble=true;
  event.stopPropogation?event.stopPropogation():(event.cancelBubble = true)
• 事件绑定
  非IE浏览器：div.addEventListener("click",callBack,false);
  IE浏览器：div.attachEvent("onclick",callBack);
• 事件解绑
  非IE浏览器：div.removeEventListener("click",callBack,false);
  IE浏览器：div.detachEvent("onclick",callBack);
• 页面滚动距离
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
• 获取元素的类名
  getElementsByClassName不支持IE8及以下浏览器
  在IE8中可以用document.querySelector来代替getElementsByClassName，但是该方法只会返回满足条件的第一个元素
  var div = document.querySelector('.box1 div');
var box1 = document.querySelector('.box1');
  document.querySelectorAll把符合条件的元素封装到NodeList类数组对象中返回
  var box1 = document.querySelectorAll('.box1');
• 获取CSS样式
  currentStyle只支持IE，没有设置width会返回auto默认值
  div.currentStyle.width
  getComputedStyleIE8及以下不支持，没有设置width，会返回一个真实值
  getComputedStyle(div,null).backgroundColor

if(window.getComputedStyle){
	alert(getComputedStyle(div,null).backgroundColor);
}else{
	alert(div.currentStyle.backgroundColor);
}

---

jQuery兼容问题

• 获取或直接设定当前页面滚动高度：
  $(document).scrollTop();//获取，兼容火狐谷歌
  或者$("html").scrollTop()
  今天测试了一下，发现谷歌现在也只支持通过html来获取滚动距离了
• 有动画效果的设定当前页面滚动高度：
  $("body,html").animate({ scrollTop: ... });//动画滚动效果，兼容火狐谷歌