题意：

“JavaScript：void(0)；”，即“执行 JavaScript，但不返回任何值也不跳转”

问题背景：

When I want some link to not do anything but only respond to JavaScript actions what is the best way to avoid the link scrolling to the top edge of the page?

当我希望某个链接点击后仅由 JavaScript 处理，而不触发页面滚动到顶部，以下几种最佳方案可以避免这个问题：

I know several ways of doing it, they all seem to work fine:

我知道有几种做法，它们似乎都能很好地工作：

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

or:  或者

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(){
      //...
      return false;
    });
  });
</script>

and even: 甚至

<a id="hello" href="#">Hello</a>
<script type="text/javascript>
  $(document).ready(function() {
    $("#toto").click(function(event){
      event.preventDefault();          
      //...
    });
  });
</script>

What is the difference between the above 3 examples?

以上3个示例的区别是什么？

PS: The above examples assume you are using jQuery but there are equivalents for mootools or prototype.

PS：以上示例假设你在使用 jQuery，但对于 Mootools 或 Prototype 也有相应的实现方式。

问题解决：

Binding: 

绑定

• javascript: URLs are a horror to be avoided at all times; JavaScript：javascript: URL 是必须避免的恶梦；
• inline event handler attributes aren't brilliant either, but OK for a bit of rapid development/testing;  内联事件处理属性也不是特别理想，但在快速开发/测试时可以接受；
• binding from script, leaving the markup clean, is typically considered a best practice. jQuery encourages this, but there is no reason you can't do it in any library or plain JS.  从脚本绑定，保持标记的清洁，通常被认为是最佳实践。jQuery 鼓励这种做法，但并没有理由不能在任何库或纯 JavaScript 中实现这种做法。

Responses: 

响应

• In jQuery return false means both preventDefault and stopPropagation, so the meaning is different if you care about parent elements receiving the event notification;  在 jQuery 中，return false 既表示 preventDefault，也表示 stopPropagation，因此如果你关心父元素是否接收到事件通知，那么它们的含义不同；
• jQuery is hiding it here but preventDefault/stopPropagation have to be spelled differently in IE usually (returnValue/cancelBubble).  jQuery 在这里隐藏了这些行为，但在 IE 中，preventDefault / stopPropagation 通常需要以不同的方式拼写（returnValue / cancelBubble）。

However: 

然而：

• You have a link that isn't a link. It doesn't link anywhere; it's an action. <a> isn't really the ideal markup for this. It'll go wrong if someone tries to middle-click it, or add it to bookmarks, or any of the other affordances a link has.    你有一个不是链接的链接。它不链接到任何地方；它是一个动作。<a> 其实并不是理想的标记。如果有人尝试中键点击它，或者将它添加到书签，或者使用链接的其他功能时，它会出问题。
• For cases where it really does point to something, like when it opens/closes another element on the page, set the link to point to #thatelementsid and use unobtrusive scripting to grab the element ID from the link name. You can also sniff the location.hash on document load to open that element, so the link becomes useful in other contexts.  对于真正指向某些东西的情况，比如当它打开/关闭页面上的另一个元素时，将链接指向 #thatelementsid 并使用非侵入式脚本从链接名称中获取元素 ID。你也可以在文档加载时检查 location.hash 来打开该元素，这样链接在其他上下文中也会变得有用。
• Otherwise, for something that is purely an action, it would be best to mark it up like one: <input type="button"> or <button type="button">. You can style it with CSS to look like a link instead of a button if want.  否则，对于纯粹是一个动作的情况，最好像一个动作那样标记它：<input type="button"> 或 <button type="button">。你也可以使用 CSS 将它样式化成像链接一样，而不是按钮，如果你希望的话。
• However there are some aspects of the button styling you can't quite get rid of in IE and Firefox. It's usually not significant, but if you really need absolute visual control a compromise is to use a <span> instead. You can add a tabindex property to make it keyboard-accessible in most browsers although this isn't really properly standardised. You can also detect keypresses like Space or Enter on it to activate. This is kind of unsatisfactory, but still quite popular (SO, for one, does it like this).   然而，在 IE 和 Firefox 中，有一些按钮样式是无法完全去掉的。通常这不太重要，但如果你真的需要绝对的视觉控制，妥协方法是使用 <span>。你可以为它添加 tabindex 属性，使其在大多数浏览器中可以通过键盘访问，尽管这并没有真正标准化。你也可以检测到它上的空格键或回车键来激活它。这种方式虽然有些不太理想，但依然相当流行（例如 Stack Overflow 就是这样做的）。
• Another possibility is <input type="image">. This has the accessibility advantages of the button with full visual control, but only for pure image buttons.  另一个可能性是 <input type="image">。这具有按钮的可访问性优势，并且提供完全的视觉控制，但仅限于纯图像按钮。