当我希望某些链接不执行任何操作而只响应 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 中return false意味着两者preventDefaultstopPropagation,意义是不同的,如果你关心父元素收到事件通知;
  • jQuery 将其隐藏在这里,但是preventDefault/stopPropagation通常在 IE 中必须以不同的方式拼写(returnValue/cancelBubble)。

然而:

  • 您有一个不是链接的链接。<a>并不是真正理想的标记。
  • 对于它确实指向某些内容的情况,例如当它打开/关闭页面上的另一个元素时,请将链接设置为指向#thatelementsid并使用不显眼的脚本从链接名称中获取元素 ID。location.hash在文档加载时打开该元素,因此该链接在其他上下文中变得有用。
  • 否则,对于纯粹是一个动作的东西,最好将其标记为:<input type="button">或者<button type="button">
  • 然而,在 IE 和 Firefox 中,按钮样式的某些方面您无法完全摆脱。<span>反而。tabindex属性以使其在大多数浏览器中可以通过键盘访问,尽管这并没有真正正确标准化。
  • 另一种可能性是<input type="image">

来自: stackoverflow.com