js日历与onbeforeunload不兼容?非跳转用<a>标签的href屏蔽法

刚刚做了一个页面,有文本框需要输入日期,为了兼容IE和FF,到网上找了个 js日历选择器。
后来又要给页面加个离开时提示确认的功能,于是用到了window.onbeforeunload()事件,虽然好像不是标准,不过IE和FF都支持此事件。

可是现在问题来了,在FF下用起来没什么问题,可是在IE中,每选择一次日期,都要蹦个提示我是否确认离开当前页面的框框,很是烦人。

经查询资料并测试发现,IE在点击“href”属性不为空的<a>链接元素时都会调用onbeforeunload()事件处理函数。而前面的那个js日历选择器则是把每一个可以点击选择的项目都当作<a>处理了。为了达到美观的效果,这些<a>都给加上了“href”属性,这样才会在IE中产生鼠标指上去指针变成手,以及出现下划线或变色等效果。但这些<a>仅仅是用于美观的,所以其“href”属性被设为了“javascript:void(0)”,表示不链接到别的页面,也不做任何操作,具体的点击操作则写在了<a>的onclick()事件里。这在网页脚本中是很常见的一种处理方式。

可是在这里却给我带来了麻烦:我每点一项<a>标签显示的元素时,IE就会问让我确认离开当前页面一次,即使我选择了确认离开,IE也没有别的动作——我仅仅是想选择一个日期输入到文本框而已嘛。

后来我发现了解决方法:如果在<a>的onclick()事件中将事件返回值设为false,产生的效果就跟没有点击<a>一样,这样的话IE也不会认为你是要跳到别的页面了,当然就不会动不动都弹出框框来让你确认啦。

当然,那个js日历中点击日期后的处理本身就是写在onclick()事件中的,我在其最后添加一句“return false;”便可,又能保证原有的功能正常运作,也不会触动那个神经质的IE了。经测试在FF中也正常!

说回来,对这个<a>标签可真是又爱又恨啊。

附:

原作参考链接:
小巧的JS日历

我修改后的js源码(仅仅修改了几个onclick()而已):
不好意思,由于CSDN的代码格式化系统太多bug,导致我贴上去的代码总被无端修改得无法正常运行,文件上床功能也没有,各位若有兴趣,请参考上面的原作链接然后自行修改。

你可能感兴趣的:(js日历与onbeforeunload不兼容?非跳转用<a>标签的href屏蔽法)