今天在開發中發現,使用如下方式的連結。在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