火狐浏览器是没有window.event的,IE浏览器有,在使用event的js事件中,怎样兼容火狐呢?通过网上搜索总结了一下,大概有以下几种方式:
1、把event作为参数传到js方法。例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>火狐和IE event</title> <script language="javascript"> function but(event){ //var event = event || window.event; alert(event); } </script> </head> <body> <input type="button" value="按钮" /> </body> </html> |
上面是我自己写的例子,我看有的文章中加了“var event = event || window.event;”这么一句,但是我的测试结果是加不加这句都一样。
2、直接获取event。如果js方法不能传参数,那么只能直接获取了。例如:
function Test(){ var event = arguments.callee.caller.arguments[0] || window.event; //target 就是这个对象 target = event.srcElement||event.target; //这个对象的值 targetValue = target.value; alert(targetValue); } <input type="button" value="按钮1" /> |
一般情况下这样就可以获得event,arguments.callee.caller.arguments[0]这句话有点长,对这句话的解释有个测试例子,如下:
function a(){ b(); } function b(){ alert(b === arguments.callee) alert(b.caller === a) alert(arguments.callee.caller === a) } a(); |
上面的这个例子将输出3个true,表明当a()调用时,函数b与函数a的关系。
arguments.callee指的就是当前的函数体
arguments.callee.caller就是当前函数的上级函数
所以当执行onclick="a()"时arguments.callee就是a(),arguments.callee.caller就是function onclick
onclick的第一个能数就是event,也就是arguments.callee.caller.arguments[0]这个。
上面的测试例子及解释都是引用别人的。
但是在我实际的应用中,arguments.callee.caller.arguments[0]这句话有时也得不到event,只好又在网上找了找,找出这么一段代码来:
function getEvent() //同时兼容ie和ff的写法 { if (document.all) return window.event; func = getEvent.caller; while (func != null) { var arg0 = func.arguments[0]; if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } } func = func.caller; } return null; } |
上面的这段代码在我的应用中都能获得event。
注意说明:IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,
但是没有srcElement属性,兼容性的写法是:
obj = event.srcElement ? event.srcElement : event.target;
在网上搜索的总结了一下,哪有不对的地方,还请各位网友指出及补充。