最近整理了一下关于前端的javascript的一些不同浏览器的兼容性问题。
1、Js获取非行间样式:
obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
Chrome、FireFox、IE9+: getComputedStyle(obj,false)[name],IE8-报错
IE: obj.currentStyle[name],在Chrome和FireFox下不报错,返回undefine
因此,拿obj.currentStyle做判断条件,如果obj.currentStyle为真,那么使用obj.currentStyle[name]获得样式,否则使用getComputedStyle(obj,false)[name]
还有一种写法是(obj.currentStyle || getComputedStyle(obj,false))[name]
2、DOM操作的各种不兼容情况:
父元素.firstElementChild || 父元素.firstChild
父元素.lastElementChild || 父元素.lastChild
子元素.previousElementSibling || 子元素.previousSibling
子元素.nextElementSibling || 子元素.nextSibling
3、body滚动距离
FireFox和IE: document.documentElement.scrollTop
Chrome: document.body.scrollTop
两者无先后顺序,若获取不到返回0
4、ev的兼容性
function(ev){
var oEvent = ev||event;
}
IE8-能够兼容event,ev是undefined
FireFox是ev,而event则报错
chrome两个都兼容
5、’use strict’
兼容高版本浏览器:chrome,FF,IE10+
不兼容IE9-
6、文本框文字输入事件
FireFox、Chrome和IE9+: obj.oninput
IE10-: obj.onpropertychange
7、事件绑定与解除绑定
FireFox、Chrome和IE9+: obj.addEventListener(‘事件名’,fn,false) obj.removeEventListener(‘事件名’,fn,false)
IE8-: obj.attachEvent(‘on’+’事件名’,fn) obj.detachEvent(‘on’+’事件名’,fn)
8、鼠标滚轮事件
Chrome、IE: mousewheel
FireFox: DOMMouseScroll
判断滚轮滚动方向
Chrome、IE: oEvent.wheelDelta
FireFox: oEvent.detail
9、阻止默认事件
FireFox、Chrome、IE9+: oEvent.preventDefault&&oEvent.preventDefault()
IE低版本: return false
但return false遇到事件绑定会失效。为了兼容IE低版本,使用事件捕获。
10、鼠标移动
Chrome、IE: oEvent.fromElement(鼠标移入)
oEvent.toElement(鼠标移出)
FireFox: oEvent.relatedTarget(鼠标移入)
oEvent.relatedTarget(鼠标移出)
11、DOMready
FireFox、Chrome、IE9+: DOMContentLoaded
IE低版本: document.onreadystatechange
当docu.readystate == ‘complete’时表示加载完成
但是上面两者略微有点不同, DOMContentLoaded是指加载完js、css、HTML后,而onreadystatechange与onload有点相似
12、事件委托
oEvent.srcElement || oEvent.target
13、获取鼠标位置
高版本浏览器中: x轴:oEvent.pageX y轴:oEvent.pageY
低版本: oEvent.clientX+scrollLeft oEvent.clientY+scrollTop
14、ajax对象
Chrome、FireFox: XMLHttpRequest => var oAjax = new XMLHttpRequest();
IE: ActiveXObject => var oAjax = new ActiveXObjext(‘Microsoft.XMLHTTP’)