1.关于获取行外样式的兼容性
通过js我们不能通过(HTML元素.style.样式属性
)获取到页面上元素的行内样式,我们可以通过一下两个方法来获取行内样式
1.getComputedStyle(oDiv,false)
兼容Firefox,Opera,Safari,Chrome,不兼容IE
2.currentStyle
IE下获取行内样式
oDiv.currentStyle.width
这里封装了一个兼容所有浏览器的函数
funtion getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
2. 事件中兼容性问题
window.event只能在IE下运行, Firefox必须从源处加入event作参数传递。我在拖拽事件的项目中经常遇到这事件的兼容性问题
var e = e || event;
var obox = document.getElementById('drag')
//1、给需要移动的元素添加onmousedown事件,给拖动做好准备
obox.onmousedown = function(e) {
var e = e || event; //获取事件对象,这个是兼容写法
var disX = oEvent.clientX - parseInt(obox.style.left);
var disY = oEvent.clientY - parseInt(obox.style.top);
document.onmousemove = function(e) { //实时改变目标元素obox的位置
var e = e || event;
obox.style.left = e.clientX - disX + 'px';
obox.style.top = e.clientY - disY + 'px';
}
//停止拖动 解绑事件
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
3. 阻止事件冒泡
在IE下面阻止冒泡的事件是e.cancelBubble
在e.stopPropagation() 是我们现在比较标准的写法
e.stopPropagation() || e.cancelBubble
注意:stopPropagation()是一个方法,而cancelBubble 是属性,默认值是true
4. 阻止浏览器默认行为
e.preventDefault() || e.returnValue = false
5. DOM事件监听的兼容性
IE8以上及其他浏览器 :监听addEventListener 解除监听 removeEventListener
IE8及以下 :监听attachEvent 解除监听detachEvent
//obj 给指定的元素添加事件
//type 事件的类型
//fn 函数
//useCapTure 捕获还是冒泡
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,useCapTure)
}else{
obj.attachEvent("on"+type,fn)
}
}
6. 创建ajax对象
IE低版本浏览器: ActiveXObject(“Microsoft,XMLHTTP”)
Chrome等其他浏览器 : var xhr = new XMLHttpRequest()
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP")
7.DOM 的childNodes 获取子节点的兼容性问题
- IE8以下:获取的是元素节点
- 高版本浏览器::获取的包含文本节点和元素节点
解决方法: 使用nodeType:节点的类型,并作出判断- 文本节点 nodeType=3
- 元素节点 nodeTyPE=1