导航

公告

（转载）S兼容性问题（FF与IE）

不同浏览器中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; );
}

posted on 2013-08-28 10:16 刘继才阅读(185) 评论(0) 编辑收藏举报

刷新页面返回顶部