不同浏览器中js兼容问题大全
1.document.formName.item('itemName')问题
说明：
1 //IE下（两种） 2 document.formName.item("itemName"); 3 document.formName.elements ["elementName"]; 4 //Firefox下 5 document.formName.elements["elementName"]; 6 //解决方法： 7 document.formName.elements["elementName"]
2.集合类对象问题
说明：
IE下,可以使用()或[]获取集合类对象;
Firefox下,只能使用[]获取集合类对象;
解决方法:统一使用[]获取集合类对象.
3.自定义属性问题
说明：
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法：统一通过getAttribute()获取自定义属性.
4.eval("idName")问题
说明：
IE下,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;
Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象；
解决方法：统一用getElementById("idName")来取得id为idName的HTML对象.
5.window.event问题
说明：
window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用.
解决方法：
document.onmousemove=function (ev){ var oDiv=document.getElementById('div1'); var oEvent=ev||event; oDiv.style.left=oEvent.clientX+'px'; oDiv.style.top=oEvent.clientY+'px'; }
6.event.x与event.y问题
说明：
用IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,even对象有pageX,pageY属性,但是没有x,y属性；
解决方法：
使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX
复杂点要考虑绝对位置：
function getAbsPoint(e){ var x = e.offsetLeft, y = e.offsetTop; while (e = e.offsetParent) { x += e.offsetLeft; y += e.offsetTop; } alert( " x: " + x + " , " + " y: " + y); }
7.事件监听
说明：
IE提供了attachEvent和detachEvent两个接口；
而Firefox提供 的是 addEventListener和removeEventListener两个接口；
解决方法：
if(oBtn.attachEvent){ oBtn.attachEvent('onclick', aaa); oBtn.attachEvent('onclick', bbb); } else{ oBtn.addEventListener('click', aaa, false); oBtn.addEventListener('click', bbb, false); }
例子（事件绑定的公共函数）：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script type="text/javascript"> 7 function myAddEvent(obj, sEvent, fn){ //绑定事件 8 if(obj.attachEvent){ 9 obj.attachEvent('on'+sEvent, fn); 10 } 11 else{ 12 obj.addEventListener(sEvent, fn, false); 13 } 14 } 15 16 function aaa(){ 17 alert('a'); 18 } 19 20 function bbb(){ 21 alert('b'); 22 } 23 24 window.onload=function (){ 25 var oBtn=document.getElementById('btn1'); 26 27 myAddEvent(oBtn, 'click', aaa); 28 myAddEvent(oBtn, 'click', bbb); 29 }; 30 </script> 31 </head> 32 33 <body> 34 <input id="btn1" type="button" value="aaa" /> 35 </body> 36 </html>
8.事件源的获取
说明：
在使用事件委托的时候，通过 事件源获取来判断事件到底来自哪个元素，但是，在IE 下，event对象有srcElement属性，但是 没有target属性；Firefox下，even对象有target 属性，但是没有srcElement属性。
解决方法：
ele = function (evt){ // 捕获当前事件作用的对象 evt = evt || window.event; return (obj=event.srcElement?event.srcElement:event.target; ); }