JS常见的兼容性问题及决解方法

一、event对象

• 标准浏览器下直接传入e使用，IE678下不支持直接传入，使用window.event对象
  解决办法：

  var ev = event || window.event

二、阻止默认行为

• ev.preventDefault()：标准浏览器下阻止默认行为
• ev.returnValue = false：IE非标准浏览器阻止默认行为
  解决办法：可以封装一下

  function preventDefault(event){
  	var ev = event || window.event;
  	//判断标准浏览器下是否支持
  	if(ev.preventDefault){
  		ev.preventDefault();
  	}else{
  		ev.returnValue = false;
  	}
  }

三、阻止冒泡事件

• ev.stopPropagation()：标准浏览器下的处理方法
• ev.cancelBubble=true：IE678下的处理方法
  解决办法：和阻止默认事件一样

  function stopPropagation(){
  	var ev = event || window.event;
  	if(ev.stopPropagation){
  		ev.stopPropagation();
  	}else{
  		ev.cancelBubble = true;
  	}
  }

四、addEventListener事件绑定，这个这么好用同样有兼容性问题，天杀的JS

• 标准下：addEventListener
• IE下：attachEvent
  解决办法：封装成on()，^_^ 有点像~~JQuery

  //参数：ID，事件类型，执行的函数
  function on(id, type, fn){
  	var dom = document.getElementById(id);
  	//如果标准浏览器支持
  	if(dom.addEventListener ){
  		dom.addEventListener(type, fn, false);	//false：表示冒泡事件，true：捕获事件
  	}else if(dom.attachEvent){
  		//如果支持 --IE
  		dom.attachEvent('on' + type, fn);
  	}
  }

###五、getComputedStyle：这个也挺常用的，获取浏览器计算后最终的样式值，但是IE低版本不支持，万恶的IE

• currentStyle：IE低版本使用这个（IE678？忘了~~），总之把兼容写法写上

  //参数：对象，需要获取的属性
  function getStyle( obj, attr ){ 
  	//注意：先判断IE，否则IE不认getComputedStyle报错，万恶的IE
  	return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; 
  }

六、获取滚动条滚动的距离，这个也有兼容性？嗯！还是谷歌浏览器

document.documentElement.scrollTop：除了谷歌所有浏览器都认
document.body.scrollTop：谷歌认的
解决办法：

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

七、浏览器可视区宽度判断

这个用的不多，做响应式可以用来判断浏览器的宽度。

var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0 ;

总结：JS不兼容的问题就这些吗？当然不是，这些都是是比较常用的，有兴趣的可以将这些封装成一个工具包，开发的时候直接调用。