起因
对于 a 标签的点击事件,也许我们早已习惯 href=”javascript:void(0);” 这样去写,之后绑定 click 事件来处理,但今天在 IE8 浏览器下某个页面遇到了很诡异的问题。如果我们点击了某个这个 a 标签,JavaScript 中的点击事件执行之后,页面中的 input 使用 $(‘input’).val() 等就取不到值了,使用 $(‘form’).serialize() 之后相关 input 的字段也没有值。由此展开了折腾之路。
折腾之路
使用各种方式取值,都没有获取到 input 输入框的值,一直以为是取值方式的问题,一直折腾无果,因为在其他浏览器下均正常。
如果不点击相关 a 标签,则可以获取到 input 输入框的值。
在另外的具有 placeholder 处理的页面中,点击 a 标签后,input 中的 placeholder 值没有了,因为 IE8 下的 placeholder 需要绑定相关事件,因此可以断定点击 a 标签之后,页面可能存在刷新。
果不其然,a 标签的 href 属性即便写为 javascript:void(0); 仍然会导致页面在 IE8 下进行某种机制的页面刷新操作。
解决方案
在每一个这种 a 标签的点击事件中,添加 e.preventDefault() 来阻止默认事件即可。
潜在风险
在添加这行代码之后,对于想跳转的有些 a 标签可能不能跳转了,那么需要再在事件下面对 href 进行判断,或者判断这个 href 是否符合直接跳转的条件,而分别进行阻止默认事件的处理。