javaScript中的部分兼容问题

javaScript中的部分兼容问题

• 选择器
  所有浏览器支持：
  document.getElementById(“”); //根据id获取元素——常用
  document.getElementsByTagName(“”)[n]; //根据css获取元素
  IE8及以下不支持：
  document.getElementsByClassName(“”)[n]; //根据class得元素
  document.getElementsByName(“”)[n]; //根据name获取元素
  document.querySelector(“”); //根据css选择器获取元素_ES5
  document.querySelectorAll(“”); //根据css选择器获取元素_ES5

• 页面卷动值
  早期的谷歌支持 document.body.scrolltop;
  正常浏览器支持 document.documentElement.scrollTop;
  解决方法：
  var scrollTop = document.documentElement.scrollTop || document.body.scrolltop;

• 尺寸类操作
  正常浏览器：offsetParent //获取到定位父元素距离
  IE：offsetParent //获取到定位父元素距离(包含边框)

  火狐不支持：offsetX/Y //鼠标相对于事件源的坐标
  解决：e.pageX - e.offsetLeft
  e.pageY - e.offsetTop

• 事件目标源
  function damo(e){
  var e = e || window.event
  var target = e.target || e.srcElement
  }

• 获取非行内样式
  正常浏览器支持：getComputedStyle();
  IE8及以下只支持：.currentStyle;
  解决：if(元素.currentStyle){
  元素.currentStyle
  }else{
  getComputedStyle()
  }

function getStyle(ele,attr){
	if(getComputedStyle){
		return getComputedStyle(ele,false)[attr];
	}else{
		return ele.currentStyle[attr];
	}
}

• 事件监听
  注：监听式(DOM2)虽然可重复绑定，但有兼容
  正常浏览器：.addEventListener()
  IE: .attachEvent()

//添加事件监听式绑定事件
function addEvent(ele,eventType,callback){
	if(ele.attachEvent){
		ele.attachEvent("on"+eventType,callback);
	}else{
		ele.addEventListener(eventType,callback);
	}
}

//删除事件监听式绑定的事件
function removeEvent(ele,eventType,callback){
	if(ele.detachEvent){
		ele.detachEvent("on"+eventType,callback);
	}else{
		ele.removeEventListener(eventType,callback);
	}
}

• 事件冒泡的阻止
  正常浏览器：e.stopPropagation()
  IE:e.cancelBubble = true

//事件冒泡：注意将事件对象传参
function stopBubble(e){
	if(e.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancelBubble = true;
	}
}

• 阻止默认事件
  正常浏览器：e.preventDefault()
  IE: e.returnValue = false

//阻止默认事件
function stopDefault(e){
    if(e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
}