關於火狐和IE下href=”javascript:void(0)”相容性的問題

勇淘未來發表於2018-10-12

今天在開發中發現,使用如下方式的連結。在Chrome中點選後行為符合預期,但在IE下會新開標籤卡(根據參考資料,Firefox中有相同問題)。 

經過排查,發現是href=”javascript:void(0);”導致的問題,本來javascript:void(0);的用處是不用整體重新整理網頁且返回一個空值,但這兒由於DOM本身的冒泡事件所以會最後執行HREF屬性內的javascript:void(0);導致執行函式返回了一個空值,所以覆蓋掉了前面正常執行函式所返回的值引起的錯誤。

一般情況下,IE會先執行DOM本身繫結的事件,如ONCLICK;如果沒有阻止冒泡,則會順序執行HREF屬性。如果想正確執行,可以在前面用RETURN FALSE終止冒泡,例如:

<a target=”_blank” class=”prev”  onclick=”return false;”   href=”javascript:void(0);”></a>

或者直接刪去也行,如:
<a target=”_blank”  class=”prev” ></a>

原因在於三款瀏覽器,對三個屬性的處理順序不同。

Chrome順序:onclick -> href -> target
IE和Firefox順序:onclick -> target -> href

相關文章