兼容IE和FF的js脚本做法(1/2)

兼容ie和ff的脚本做法

以下以 ie 代替 internet explorer,以 mf/ff 代替 mozzila firefox  */
 
//window.event   
ie:有window.event对象   
ff:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=domousemove(event)
解决方法:var event = event || window.event; 
example:
<script>
       function test(event) {
            var event = event || window.event;
            //do something
       }
</script>
<input type=”button” value=”click” onclick=”test(event)”/>
 
 
//鼠标当前坐标   
ie:event.x和event.y。   
ff:event.pagex和event.pagey。   
通用:两者都有event.clientx和event.clienty属性。   
 
//鼠标当前坐标(加上滚动条滚过的距离)   
ie:event.offsetx和event.offsety。   
ff:event.layerx和event.layery。
解决方法:
<script>
       function test(event) {
            var event = event || window.event;
            //or var event = event ? event : window.event;//这2中都可以,也可以用if else(这简写)
            var x = event.offsetx || event.layerx;
            var y = event.offsety || event.layery;
            //do something
       }
</script>   
<div onmousedown=”test(event)”></div> 
/**其他的兼容的解决方法类似,不再一一举例**/

//event.srcelement问题   
说明:ie下,event对象有srcelement属性,但是没有target属性;firefox下,even对象有target属性,
但是没有srcelement属性.   
解决方法:使用obj(obj = event.srcelement ? event.srcelement : event.target;)
来代替ie下的event.srcelement或者
firefox下的event.target. 请同时注意event的兼容性问题。  
 
//event.toelement问题   
问题:   
ie下,even对象有srcelement属性,但是没有target属性;
firefox下,even对象有target属性,但是没有srcelement属性   
解决方法:   
var target = e.relatedtarget || e.toelement;   
 
//标签的x和y的坐标位置:style.posleft 和 style.postop   
ie:有。   
ff:没有。   
通用:object.offsetleft 和 object.offsettop。   
 
//窗体的高度和宽度   
ie:document.body.offsetwidth和document.body.offsetheight。注意:此时页面一定要有body标签。   
ff:window.innerwidth和window.innerhegiht,
以及document.documentelement.clientwidth和document.documentelement.clientheight。   
通用:document.body.clientwidth和document.body.clientheight。   
 
//添加事件   
ie:element.attachevent(“onclick”, function);。   
ff:element.addeventlistener(“click”, function, true)。   
通 用:element.onclick=function。虽然都可以使用onclick事件,但是onclick和上面两种方法的效果是不一样的,
onclick 只有执行一个过程,而attachevent和addeventlistener执行的是一个过程列表,也就是多个过程。
例如:element.attachevent(“onclick”, func1);
element.attachevent(“onclick”, func2)这样func1和func2都会被执行。   
 
//标签的自定义属性   
ie:如果给标签div1定义了一个属性value,可以div1.value和div1[“value”]取得该值。   
ff:不能用div1.value和div1[“value”]取。   
通用:div1.getattribute(“value”)。   
 
//document.form.item 问题  
ie:现有问题:现有代码中存在许多 document.formname.item(“itemname”) 这样的语句,不能在 mf 下运行  
ff/ie: document.formname.elements[“elementname”]  
 
//集合/数组类对象问题  
(1)现有问题:  
    现有代码中许多集合类对象取用时使用 (),ie 能接受,mf 不能。  
(2)解决方法:  
    改用 [] 作为下标运算。如:document.forms(“formname”) 改为 document.forms[“formname”]。  
    又如:document.getelementsbyname(“inputname”)(1) 改为 document.getelementsbyname(“inputname”)[1]  
 
//html 对象的 id 作为对象名的问题  
(1)现有问题  
     在 ie 中,html 对象的 id 可以作为 document 的下属对象变量名直接使用。在 mf 中不能。  
(2)解决方法  
     用 getelementbyid(“idname”) 代替 idname 作为对象变量使用  
 
//用idname字符串取得对象的问题  
(1)现有问题  
     在ie中,利用 eval(idname) 可以取得 id 为 idname 的 html 对象,在mf 中不能。  
(2)解决方法  
     用 getelementbyid(idname) 代替 eval(idname)。   

兼容IE和FF的js脚本做法(1/2)

相关文章:

你感兴趣的文章:

标签云: