javascript - "javascript:void(0);"对比 "return false"对比 "preventDefault()"

Question

当我希望某些链接不执行任何操作而仅响应 javascript 操作时，避免链接滚动到页面顶部边缘的最佳方法是什么？
我知道几种方法，它们似乎都可以正常工作:

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

或

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

甚至:

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

你有什么偏好吗？为什么 ？在什么条件下？

PS:当然，上面的示例假设您使用的是 jquery，但 mootools 或原型(prototype)有等效项。

Answer 1

绑定(bind):

• javascript: URL 是一种需要始终避免的恐惧；
• 内联事件处理程序属性也不是很好，但对于一些快速开发/测试来说还可以；
• 从脚本绑定(bind)，保持标记干净，通常被认为是最佳实践。 jQuery 鼓励这样做，但您没有理由不能在任何库或纯 JS 中这样做。

响应:

• 在 jQuery 中 return false表示 preventDefault和 stopPropagation , 所以如果你关心父元素收到事件通知，意思就不同了；
• jQuery 将它隐藏在这里但是preventDefault/stopPropagation通常必须在 IE 中拼写不同 ( returnValue/cancelBubble )。

但是:

• 您有一个不是链接的链接。它不链接任何地方；这是一个 Action 。 <a>这并不是真正理想的标记。如果有人试图中键单击它、将其添加到书签或链接具有的任何其他可供性，它就会出错。
• 对于它确实指向某物的情况，例如当它打开/关闭页面上的另一个元素时，将链接设置为指向 #thatelementsid并使用不显眼的脚本从链接名称中获取元素 ID。您还可以嗅探 location.hash在文档加载时打开该元素，因此该链接在其他上下文中变得有用。
• 否则，对于纯粹是 Action 的事情，最好将其标记为:<input type="button">或 <button type="button"> .如果需要，您可以使用 CSS 将其设置为看起来像链接而不是按钮的样式。
• 但是，在 IE 和 Firefox 中，您无法完全摆脱按钮样式的某些方面。它通常并不重要，但如果你真的需要绝对的视觉控制，折衷方案是使用 <span>反而。您可以添加 tabindex属性使其在大多数浏览器中都可以通过键盘访问，尽管这并不是真正正确的标准化。您还可以检测按键，如 Space 或 Enter 在其上激活。这有点不尽如人意，但仍然很受欢迎(所以，一方面，是这样的)。
• 另一种可能是 <input type="image"> .这具有具有完全视觉控制的按钮的可访问性优势，但仅适用于纯图像按钮。