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

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

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

后经查找资料,发现需如下解决。
通过onclick阻止浏览器默认事件:<a οnclick="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 οnclick="fn()">Does not appear as a link, because there's no href</a>
  2. <a href="javascript:void(0)" οnclick="fn()">fn is called</a>
  3. <a href="javascript:undefined" οnclick="fn()">fn is called</a>
  4. <a href="javascript:" οnclick="fn()">fn is called too!</a>

不用a标签了,改用elementUI的button
<el-button type="text" @click="handleClick(scope.row)" >{{scope.row.name}}</el-button>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。