关于火狐和IE下href="javascript:void(0)"兼容性的问题
今天在开发中发现,使用如下方式的链接。在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)"兼容性的问题的更多相关文章
- a标签使用href=”javascript:void(0); 在火狐浏览器跟chrome 不兼容
使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题).<a href=”javascript:void(0);” targe ...
- a href=#与 a href=javascript:void(0) 的区别
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...
- <a href="javascript:void(0)" onclick="ff()" ></a> 用法解析
javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...
- a标签的href="javascript:void(0)"和href="#"的区别
修正一个说法上的bug吧.对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下. 我再来提供一个视角吧. 给<a>标签增加href属性,就意味着 ...
- a href=#与 a href=javascript:void(0) 的差别
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...
- a标签中的href="#"与href="javascript:void(0)"区别
转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...
- 浅谈href=#与href=javascript:void(0)的区别
#"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而 ...
- a href=#与 a href=javascript:void(0) 的区别(转)
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...
- a href="javascript:void(0)"
JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javas ...
随机推荐
- android颜色color.xml设置
XML Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- Thread.join(), CountDownLatch、CyclicBarrier和 Semaphore区别,联系及应用
在java 1.5中,提供了一些非常有用的辅助类来帮助我们进行并发编程,比如CountDownLatch,CyclicBarrier和Semaphore,今天我们就来学习一下这三个辅助类的用法, 由于 ...
- Python学习笔记【Supervisor】:使用Supervisor监控Tornado进程
Linux常见应用服务配置模式nginx和supervisor:采用主配置文件+项目配置文件 安装(如果使用pip安装注意看是否需要指定使用python2版本) 第一步:在Linux中使用apt-ge ...
- [Swift]LeetCode307. 区域和检索 - 数组可修改 | Range Sum Query - Mutable
Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclusive ...
- [Swift]LeetCode393. UTF-8 编码验证 | UTF-8 Validation
A character in UTF8 can be from 1 to 4 bytes long, subjected to the following rules: For 1-byte char ...
- spring boot -spring data-redis
//添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- python预编译函数compile,exec,eval
funcname = "func" func = "def %s():\n" % funcname funccontent = 'print "hel ...
- Xamarin.Android 集成百度地图SDK
前言:趁着周六闲得没事干,赶紧搞一搞Xamarin,最近也是怪无聊的,枯燥的生活不如打几行代码带劲:好了我们进入正题 我这篇文章时参考一位大佬的博客进行改变的,当然他写的需要一定的经验才可以看得懂,我 ...
- 在.NET中使用Redis
dll文件 namespace RedisDemo { public partial class RedisPage : System.Web.UI.Page { protected void Pag ...
- Nancy in .Net Core学习笔记 - 初识Nancy
前言 去年11月份参加了青岛MVP线下活动,会上老MVP衣明志介绍了Nancy, 一直没有系统的学习一下,最近正好有空,就结合.NET Core学习总结了一下. 注: 本文中大部分内容都是对官网文档的 ...