今天在开发中发现，使用如下方式的链接。在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

关于火狐和IE下href="javascript:void(0)"兼容性的问题的更多相关文章

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

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

  2. a href=#与 a href=javascript:void(0) 的区别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  3. <a href="javascript:void(0)" onclick="ff()" ></a> 用法解析

    javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...

  4. a标签的href="javascript:void(0)"和href="#"的区别

    修正一个说法上的bug吧.对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下. 我再来提供一个视角吧. 给<a>标签增加href属性,就意味着 ...

  5. a href=#与 a href=javascript:void(0) 的差别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  6. a标签中的href="#"与href="javascript:void(0)"区别

    转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...

  7. 浅谈href=#与href=javascript:void(0)的区别

    #"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而 ...

  8. a href=#与 a href=javascript:void(0) 的区别（转）

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  9. a href="javascript:void(0)"

    JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javas ...

随机推荐

  1. SEED实验——Environment Variable and Set-UID Program实验报告

    任务一:操作环境变量 实验过程一: 用printenv或env打印出环境变量. 在终端输入命令,显示结果如下图所示: 经过实验发现,printenv和env均可输出当前系统的环境变量.不同的是prin ...

  2. Senparc之OAuth原理

    今天学习了网易云课堂的 盛派的微信开发课程之OAuth微信网页授权:OAuth原理,边听边来波笔记: 1.什么是OAuth? OAuth 你的接口提供给别人使用,你需要提供Oauth,可以让被人使用, ...

  3. Mesos源码分析(3): Mesos Master的启动之二

    2. process::firewall::install(move(rules));如果有参数--firewall_rules则会添加规则   对应的代码如下: // Initialize fire ...

  4. [Swift]LeetCode296. 最佳开会地点 $ Best Meeting Point

    A group of two or more people wants to meet and minimize the total travel distance. You are given a ...

  5. [Swift]LeetCode940. 不同的子序列 II | Distinct Subsequences II

    Given a string S, count the number of distinct, non-empty subsequences of S . Since the result may b ...

  6. Visual Studio 2010软件安装教程

    链接:https://pan.baidu.com/s/10FeLlKpzFcb9yUjm3ZECsg 提取码:pup1 复制这段内容后打开百度网盘手机App,操作更方便哦 1.右击软件压缩包,选择解压 ...

  7. js中对于逗号的运算符！

    先展示一个例子! var f = (function f() { return '1'; } , function g(){ return 1; } )(); console.log(typeof f ...

  8. SpringBoot前后端分离Instant时间戳自定义解析

    在SpringBoot项目中,前后端规定传递时间使用时间戳(精度ms). @Data public class Incident { @ApiModelProperty(value = "故 ...

  9. GraphQL-前端开发的利剑与桥梁

    GraphQL-前端开发的利剑与桥梁 基本概念 GraphQL GraphQL 是一种用于 API 的查询语言,由Facebook开发和开源,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的 ...

  10. innerHTML，outerHTML，innerText，outerText

    - innerHTML 设置或获取位于对象起始和结束标签内的 HTML - outerHTML 设置或获取对象及其内容的 HTML 形式 - innerText 设置或获取位于对象起始和结束标签内的文 ...