想在HTML里实现一个很简单的功能,就是在<a>标签被点击的时候,执行一个javascript函数。然后发现,居然在IE6,Opera9和FireFox2三种浏览器里,实现方法还不一样。
当然,通用实现是存在的,即<a href="javascript:dosth(p,q);">xxx</a>,这样所有浏览器都能认识。可是我不想这么写,因为这样的话鼠标移上去状态栏就会出现我的函数名,很难看。于是换一种写法<a onclick="dosth(p,q);">xxx</a>。更简洁了是吧?可是问题就接踵而至了。
首先,不带href的<a>在IE6里是不能触发:hover的css的,也就是说原来鼠标移上去的效果没了,这应该和IE6不支持div:hover这样的写法是一个毛病,这个不难解决,加一个href="#"就可以了,反正在FireFox和Opera里都不会因此出错。
真正的麻烦从这里开始了:我的<a>标签不是直接写在html里面的,而是用javascript生成的。这部分代码很简单:
act="dosth(p,q);";
i=document.createElement("a");
with(i) {
setAttribute("href","#");
onclick=act;
}
结果呢,在Opera里运行正常,而在IE和FireFox里,居然都不执行dosth(p,q)的函数!跟踪分析发现,这俩浏览器不支持onclick这么写——但是也不报错。既然不支持,那就写成onclick=new Function(act);,这时候IE和Opera正常,FireFox依旧不认。改用setAttribute("onclick",act);好了,这下Opera和FireFox倒是都认识了,正确执行了,而且用FireFox好用的查看部分源代码功能可以看到输出是完全正确的(貌似只有FireFox提供了这个强大而实用的功能,其他浏览器都不能看执行结果的代码)。但是IE,却不执行dosth(p,q)函数,仿佛根本不存在一样——而直接在html里按这样的href+onclick属性书写是没有问题的。
最后反复调试,还是解决不了问题,没办法,只能用最无奈的方法,判断浏览器,然后对人说人话,对鬼说鬼话了。如果是IE和Opera就执行onclick=new Function(act);,如果是FireFox,就执行setAttribute("onclick",act);。
这好端端的一个简单功能,非要整得这么麻烦,唉。
更新@11.23:原因找到了,非常简单,不要在with(i)里面写onclick=new Function(act);,直接在外面写i.onclick=new Function(act);,就搞定了。这也许是FireFox的一个Bug,但是触发条件未知,因为我做一个简单的页面代码单独测这个是可以pass的……