a标签使用href=”javascript:void; 在火狐浏览器跟chrome 不兼容

Posted 2020-10-16 无恨星晨

使用如下方式的链接。在Chrome中点击后行为符合预期，但在IE下会新开标签卡（根据参考资料，Firefox中有相同问题）。
<a href=”javascript:void(0);” target=”_blank”>test</a>

后经查找资料，发现需如下解决。
通过onclick阻止浏览器默认事件：<a onclick=”return false;” href=”javascript:void(0);” target=”_blank”>test</a>
或直接：<a target=”_blank”>test</a>

原因在于三款浏览器，对三个属性的处理顺序不同。
Chrome顺序：onclick -> href -> target
IE和Firefox顺序：onclick -> target -> href

 

 

 

1. <a onclick="fn()">Does not appear as a link, because there‘s no href</a>  
2. <a href="javascript:void(0)" onclick="fn()">fn is called</a>  
3. <a href="javascript:undefined" onclick="fn()">fn is called</a>  
4. <a href="javascript:" onclick="fn()">fn is called too!</a>