由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是否符合直接跳轉的條件,而分別進行阻止默認事件的處理。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章