Jquery javascript：无效(0)； vs 返回 false vs preventDefault()

发布于08月17日

当我希望某个链接不做任何事情，只响应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也有相应的例子.

推荐答案

结合:

在任何时候都要避免javascript:个URL是一个可怕的问题；
内联事件处理程序属性也不是很出色，但对于一些快速开发/测试来说还可以；
从脚本绑定，保持标记干净，通常被认为是最佳实践.jQuery鼓励这样做，但没有理由不能在任何库或普通JS中这样做.

Responses:

在jQuery中，return false表示preventDefault和stopPropagation，所以如果您关心的是父元素接收事件通知，则含义不同；
jQuery将其隐藏在这里，但preventDefault/stopPropagation在IE中的拼写必须不同(通常为returnValue/cancelBubble).

However:

您有一个不是链接的链接.它不会链接到任何地方；它只是一个动作.对于这一点，<a>实际上不是理想的标记.如果有人试图用鼠标中键点击它，或者将它添加到书签中，或者链接所具有的任何其他启示中，它都会出错.
对于它确实指向某个东西的情况，比如当它打开/关闭页面上的另一个元素时，将链接设置为指向#thatelementsid，并使用不引人注目的脚本从链接名中获取元素ID.您还可以嗅探location.hash on document load来打开该元素，这样该链接在其他上下文中就变得有用了.
否则，对于纯粹的动作，最好将其标记为<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).
另一种可能性是<input type="image">.这具有完全视觉控制的按钮的可访问性优势，但仅适用于纯图像按钮.