由a標籤點選事件引發的IE8翻車事故
摘要：
起因
對於a標籤的點選事件，也許我們早已習慣href="javascript:void(0);"這樣去寫，之後繫結click事件來處理，但今天在IE8瀏覽器下某個頁面遇到了很詭異的問題。如果我們點選了某個這個a標籤，JavaScript中的點選事件執行之後，頁面中的inpu...
起因
對於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是否符合直接跳轉的條件，而分別進行阻止預設事件的處理。