由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 - 簡單高效的輕代碼開發框架