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

原由

对于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是否符合直接跳转的条件，而分别进行阻止默认事件的处理。

---

Diboot - 简单高效的轻代码开发框架