展会信息港展会大全

兼容IE和FF的js脚本做法
来源:互联网   发布日期:2016-03-25 16:18:59   浏览:3433次  

导读:以下以 ie 代替 internet explorer,以 mf/ff 代替 mozzila firefox */ //window.event ie:有window.event对象 ff:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=domousemove(event) 解决方法:var event = event || window.ev...

以下以 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)。

1 2

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港