js日历与onbeforeunload不兼容?非跳转用<a>标签的href屏蔽法
2007-11-30 17:03
405 查看
刚刚做了一个页面,有文本框需要输入日期,为了兼容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,导致我贴上去的代码总被无端修改得无法正常运行,文件上床功能也没有,各位若有兴趣,请参考上面的原作链接然后自行修改。
后来又要给页面加个离开时提示确认的功能,于是用到了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 onload/onunload/onbeforeunload事件
- 如何使<a>标签中的 href 属性动态绑定
- <a>标签的中既有href属性又有onclick属性
- <a>标签中href="javascript:;"表示什么意思?
- 在JS里面,取struts的<html:form>标签里面的<html:text property="title"/>值
- <a>标签中调用js的几种方法
- <a>标签的href和onclick
- js <abbr><blockquote>两个标签
- jsp中<a href=""></a>标签传递参数乱码问题解决
- <a>标签中href=\"javascript:;\"表示什么意思??
- 页面输出时用js转义替换字符串中的<script></script>标签,防止XSS
- js实现点击<li>标签弹出其索引值
- 使用html <a href=""/>标签连接action的方法
- <a>标签中href="javascript:;"表示什么意思??
- 判断<script><link>等标签src 或href内容是否加载完成
- (9)在链接<a></a>标签中写#会跳到页面上边去,为了防止,可用js写法
- 用js实现的图片在浏览器里面来回滚动效果 <兼容ie和ff>
- js正则:匹配一个html的tagname的开始标签,主要是解决包含&lt;&gt;(正则的效率问题建议不使用)
- 使用css制作三角,兼容IE6,用到的标签&lt;div&gt;&lt;s&gt;&lt;span&gt;
- <load-on-startup> 标签小议