疑问:为什么要使用href=”javascript:void(0);”?

  给<a>标签增加href属性,就意味着以下事情:

  :link选择器可以选择到它

  这个a标签可以获得焦点(可以通过tab按键访问到)

  在浏览器的默认样式表中,有href属性的<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上)。

  绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:

  让<a>够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性)

  优雅降级,在网络连接很差,还没有加载到CSS的时候,<a>依然有手型与正常的link样式。

  给<a>标签以href属性,并不连接到实际的页面的方案有:

  <a href="#"></a>

  <a href="#nogo"></a>

  <a href="##"></a>

  <a href="###"></a>

  <a href="javascript:void(0);"></a>

  <a href="javascript:void(0)"></a>

  <a href="javascript:;"></a>

  <a href="javascript:"></a>

  他们的体验有细微的差别。

  1,点击这个链接后,会让页面跳到头部,window.location.href末尾增加#(若window.location.href末尾没有#),除非在js里面捕获onclick事件并阻止默认事件。

  2有了初步的语义。但是,如果页面里面有id为nogo的元素,点击这个链接后,锚点机制会作用,页面贴齐这个元素上缘。更详细的,详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题》

  3在chrome中不再默认跳转到页面头部,4在IE11中不再跳转到页面头部。正常的点击不会在地址栏增加#,但若用户使用open in new tab的方式(比如中键),就会跳到形如http://segmentfault.com/q/1010000000339082###的地址,见下方测试。

  5~8作用相同,但使用了javascript伪协议。在IE6下面,这个a标签被点击后,IE6会使得页面中的gif暂停,并且触发onbeforeunload事件(详情参考这里),IE6认作这个页面有了重定向,并abort之后所有的请求(参考这里)。所以假如你在此之后替换了一个<img>的src,IE6完全不会完成这个新的请求。

  所以我更倾向于使用方案4。

  至于语义上LZ这种<a href="javascript:void(0)">使用方式,LS多人已经有了足够详细的回答。我再补充一点,这种情形依然可以做到搜索引擎友好支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。

  更新,我做了如下的测试:

  <p>

  <a href="#">#</a>

  </p>

  <p>

  <a href="##">##</a>

  </p>

  <p>

  <a href="###">###</a>

  </p>

  <p>

  <a href="####">####</a>

  </p>

  <p>

  <a href="#####">#####</a>

  </p>

  <script type="text/javascript">

  var n = 0 ;

  window.onhashchange = function(){

  alert(++n) ;

  }

  </script>

  在IE11中,点击###、####和#####时,页面不再跳转到头部

  在chrome中,点击##、###、####和#####时,页面不再跳转到头部。

  但是在IE11和chrome中,点击所有的<a>都会造成地址栏的修改,并触发hashchange事件。

  所以之前说的“###不会造成地址栏的改变”是错误的。

  没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。

  再次更新,这个问题引发了很多关于语义的友好讨论啊,真好。

  我赞同@fox同学的“不要滥用a来替代button”。

  问题在于,如果需要使用button,语义解决了,多浏览器样式兼容又坑爹了……

  这个我之前回答过,就顺(you)便(yi)提一下吧:如何保证各浏览器下 <input><button> 定义的按钮尺寸一样?

时间: 2024-10-06 05:08:16

疑问:为什么要使用href=”javascript:void(0);”?的相关文章

href=&quot;#&quot;与href=&quot;javascript:void(0)&quot;的区别

"#"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而Javascript:void(0) 则不是如此 所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等 打开新窗口链接的几种办法 1.window.open('url') 2.用自定义函数         <scrip

详解a href=#与 a href=javascript:void(0) 的区别

 a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接 <a href="#" onclick="javascript:return false;"> 作用同上,不同浏览器会有差异. 点击链接后,不想使页面滚到

浅谈href=#与href=javascript:void(0)的区别_经验交流

#"包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 而javascript:void(0) 则不是如此 所以调用脚本的时候最好用void(0) 或者<input onclick> <div onclick>等 打开新窗口链接的几种办法 1.window.open('url') 2.用自定义函数         <script>

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

之前在项目,用到超链接,在ie下没有问题,但是到了ie6,居然发现点击事件不起作用,#FormatImgID_0# 真不可思议,以前都没注意到,后来网上搜了下,问题就出在这个void(0)上!现把网上的资料整理了下. Html代码 #FormatImgID_1#<ahref="javaScript:void(0)" onClick="doSomething();">doSomethind</a> 让我们先来看看JavaScript中void(

为何JS操作的href都是javascript:void(0);呢_基础知识

一.我是一只小白 下半年浮躁多了,得好好静心学习,告别小白.果断买了几本书: 其中,最先看的是<javascript模式>--不少人认为很shi的一本书.--评价观后感等500字省略--当我看到第二章要结束的时候,又一次看到了"JS中避免使用void"的观点,于是,勾起了身为小白的我困扰已久的一个问题:"既然JS中void不推荐,那为何新浪微博,淘宝之流的首页JS操作的href都是javascript:void(0);呢?" 截图为证! 为什么?为什么?

javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别_javascript技巧

Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. void 操作符用法格式如下: 1. javascript:void (expression) 2. javascript:void expression expression 是一个要计算的 Javascript 标准的表达式.表达式外侧的圆括号是选的,但是写上去是一个好习惯. 你以使用 void 操作符指定超级链接.表达式会被计算但是不会当前文档处装入任何内容. 示例-点击超链接不跳转 1:<a href

ie6中href设为javascript:void(0)页面无法提交

<a class="bt_3"  href="javascript:void(0)" id="btnSubmit1" onclick="submitPage()">提交</a> submitPage() 是我定义的一个函数,原意是点击这个<a>时,提交一个表单.ft, ie6 居然不可以,怎么也不能提交. 看来是因为 ie6 执行默认动作引起来,目前两种解决方法: 第一种方法: <a 

ie6下点a标签不会submit把javascript:void(0)改成###

文章简介:IE6下javascript:void(0)不submit的另类方法. 今天解决一BUG,在ie6下点a标签不会submit,原来在a的href上写的是javascript:void(0);把javascript:void(0)改成###,问题解决.但是如果这个html是程序员喷的,那可就要走大流程了.咨询大师,于是留下了这千古绝唱. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

javascript:void(0)的问题使用探讨

 想做一个链接点击后不做任何事情,方法有很多,不过不利于用户体验,javascript:void(0)可以有效解决这个问题 在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好.    目前有如下几种解决办法:  1)点击链接后不做任何事情  代码如下: <a href="javascript:void(0);" &g