在 Wep App 中,我们经常需要在 JavaScript 中处理链接的点击。因此,我们希望用户点击 <a> 元素时阻止它的默认行为。此时我们可以用很多不同的方法来处理。例如:

<a href="#">Click Me</a>
<a href="#" onclick="return false">Click Me</a>
<a href="javascript:void(0);">Click Me</a>
<a href="javascript:void 0;">Click Me</a>
<a href="javascript:;">Click Me</a>
<a href="javascript:">Click Me</a>

第一种方法最简单,但是它会导致点击时页面滚动到页首。因此第二种方法利用 return false 语句阻止默认行为的执行。后面几种方法利用 javascript: URI 来达到页面不跳转的效果:按照规定,只要 javascript 代码执行的结果不为 undefined,则页面不跳转。因此第三、四种方法利用了 void 操作符的返回值是 undefined 的特点,而最后两种方法直接利用空语句的返回值为 undefined 的原理。

但是后面四种方法在 IE 中使用可能会有副作用:在 IE 中点击该链接会触发 window.onbeforeunload 事件(即使 IE9 也是这样的)。因此,如果你绑定了这个事件的处理程序,需要考虑这个问题。

参考资料:
[1] void - JavaScript | MDN
[2] href=“javascript:” vs. href=“javascript:void(0)”

关于 javascript:void(0) 的使用的更多相关文章

  1. js中 javascript:void(0) 用法详解

    点击链接不做任何事情: <a href="#" onclick="return false">test</a> <a href=& ...

  2. html 空链接 href="#"与href="javascript:void(0)"的区别

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

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

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

  4. href使用 javascript:;与javascript:void(0)防跳到顶部

    有时候我们在编写js过程中,需要触发事件而不需要返回值,那么就可能需要这样的写法   href=”#”,包含了一个位置信息.默认的锚是#top,也就是网页的上端,当连续快速点击此链接时会导致浏览器巨慢 ...

  5. javascript:void(0)

    这是不是一个设计缺陷呢 void(0)这种用法巧妙利用void关键字的特性返回undefined(且没有副作用).因为不是关键字,比如直接使用undefined,内容可能被改写. 再来看为啥使用0,而 ...

  6. <a href=”#”>与 <a href=”javascript:void(0)” 的区别

    <a href=”#”>中的“#”其实是锚点的意思,默认为#top,所以当页面比较长的时候,使用这种方式会让页面刷新到页首(页面的最上部) javascript:void(0)其实是一个死 ...

  7. 超级链接a中javascript:void(0)弹出另外一个框问题

    转字:http://my.oschina.net/castusz/blog/68186 结果在IE.Firefox.Chrome都是先执行的onclick事件,在项目中我们尽量不要同时使用这两种方式. ...

  8. javascript:void(0) ,设置a链接无效,设置点击a页面不刷新,不跳动

    http://www.cnblogs.com/opper/archive/2009/01/12/1373971.html 我想使用过ajax的都常见这样的代码: <a href="ja ...

  9. IE6与 javascript:void(0)

    遇到过几次这种问题,现在总结一下. 代码: <a onclick="window.location.href='http://www.google.com'" href=&q ...

  10. 超链接的#和javascript:void(0)的区别

    转载于:http://www.uw3c.com/cssviews/css12.html   在工作中,如果我们想把a标签中的链接置成空链接,我们一般会用两种方法: 1 <a href=" ...

随机推荐

  1. Android:调试之LogCat

    通过 Logcat 查看: 常用的Log有5个:Log.v().Log.d().Log.i() .Log.w(). Log.e(). Log.i( "类":"函数名&qu ...

  2. php Ajax 局部刷新

    php Ajax 局部刷新: HTML部分 </head> <body> <h1>Ajax动态显示时间</h1> <input type=&quo ...

  3. 关于fedora下jdk的安装

    http://zhumeng8337797.blog.163.com/blog/static/1007689142012472620637/ alternative命令 http://blog.csd ...

  4. 理解extern char s[100]与extern char *s

    在x.c中定义了一个字符数组 char s[100],在l.c中进行引用extern char s[200], 有些c程序新手经常把它写成extern char *s. 这两种写法的含义一样吗? 首先 ...

  5. Complete The Pattern #6 - Odd Ladder

    Complete The Pattern #6 - Odd Ladder Task: You have to write a function pattern which creates the fo ...

  6. poj3067

    求交点的个数: 容易发现,对于两条航线(xi,yi)和(xj,yj),设xi<xj 只有yi>yj时两条航线存在交点: 于是我们考虑以x为第一关键字减序,y为第二关键字为减序排序: 则对于 ...

  7. echarts 问题2

    加载图表的区域div必须单独给定class,此样式中必须还有宽和高,不然图表出来之后会有这样那样的问题

  8. 架构版本与 NuGet 的版本不兼容 解决方案

    VS的NuGet管理在大大提高了开发效率,一直都在使用但今天在遇到了一个问题,引用一个所需要的NuGet包VS缺提示如下错误

  9. Cookie设置HttpOnly,Secure,Expire属性

    在eclipese中创建Web工程时,有个dynamic web module version选项,首先解释下这个选项的意思: http://stackoverflow.com/questions/3 ...

  10. 实现类似QQ的即时通信程序(十一)

    此为网络编程的一个系列,后续会把内容补上....