今天在开发中发现,使用如下方式的链接。在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. SSL/TLS握手过程

    ----------------------------------专栏导航----------------------------------HTTPS协议详解(一):HTTPS基础知识 HTTPS ...

  2. HTTP协议概念与特点,HTTP的状态码,HTTPS是什么?

    很多人在打开网页的时候,在浏览器地址栏里都会看到http  ,在Java WEB里,HTTP也是个重点内容,今天我们就来详细了解和学习HTTP . HTTP是Hyper Text Transfer P ...

  3. 音视频编解码技术(一):MPEG-4/H.264 AVC 编解码标准

    一.H264 概述 H.264,通常也被称之为H.264/AVC(或者H.264/MPEG-4 AVC或MPEG-4/H.264 AVC) 1. H.264视频编解码的意义 H.264的出现就是为了创 ...

  4. [Swift]LeetCode276. 粉刷栅栏 $ Paint Fence

    There is a fence with n posts, each post can be painted with one of the k colors. You have to paint ...

  5. [Swift]LeetCode748. 最短完整词 | Shortest Completing Word

    Find the minimum length word from a given dictionary words, which has all the letters from the strin ...

  6. [Swift]LeetCode986. 区间列表的交集 | Interval List Intersections

    Given two lists of closed intervals, each list of intervals is pairwise disjoint and in sorted order ...

  7. mysql 主主+ Keepalived 高可用

    这是在mysql互为主从的基础上做的 yum -y install keepalived    #两台机器上都装 配置Keepalived主从, vrrp_instance VI_1 { state ...

  8. 第一次c语言上机

    实验结论 part1: 第一部分的内容是按照书上所给的例题,进行简单的验证.虽然听起来很简单,但是由于之前并未接触过这方面的内容,还是犯了很多微小的错误.主要是在进行编程语言的输入时会输错字母,会忘记 ...

  9. 关于CGI 和 PHP-FPM需要弄清的

    https://blog.csdn.net/gao_yu_long/article/details/79390510 补充一点: 如果php-cgi -b 127.0.0.1:6999,则6999端口 ...

  10. xtrabackup备份(MySQL备份)与恢复

    xtrabackup备份(MySQL备份)与恢复 1. innobackupex参数选项 --no-timestamp: 不创建一个时间戳 --defaults-file=[MY.CNF] //指定配 ...