由a标签点击事件引发的IE8翻车事故

本文探讨了在IE8浏览器中,使用javascript:void(0)的a标签点击事件引发的页面刷新问题,及如何通过e.preventDefault()解决此问题,避免影响页面表单元素的值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

起因

对于a标签的点击事件,也许我们早已习惯href="javascript:void(0);"这样去写,之后绑定click事件来处理,但今天在IE8浏览器下某个页面遇到了很诡异的问题。如果我们点击了某个这个a标签,JavaScript中的点击事件执行之后,页面中的input使用$('input').val()等就取不到值了,使用$('form').serialize()之后相关input的字段也没有值。由此展开了折腾之路。

折腾之路

  1. 使用各种方式取值,都没有获取到input输入框的值,一直以为是取值方式的问题,一直折腾无果,因为在其他浏览器下均正常。
  2. 如果不点击相关a标签,则可以获取到input输入框的值。
  3. 在另外的具有placeholder处理的页面中,点击a标签后,input中的placeholder值没有了,因为IE8下的placeholder需要绑定相关事件,因此可以断定点击a标签之后,页面可能存在刷新。
  4. 果不其然,a标签的href属性即便写为javascript:void(0);仍然会导致页面在IE8下进行某种机制的页面刷新操作。

解决方案

在每一个这种a标签的点击事件中,添加e.preventDefault()来阻止默认事件即可。

潜在风险

在添加这行代码之后,对于想跳转的有些a标签可能不能跳转了,那么需要再在事件下面对href进行判断,或者判断这个href是否符合直接跳转的条件,而分别进行阻止默认事件的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值