"JavaScript的:无效(0);" vs"return false"vs"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

捆绑:

• javascript: URL始终是一个可以避免的恐怖;
• 内联事件处理程序属性也不是很好,但可以进行一些快速开发/测试;
• 从脚本绑定,保持标记清洁,通常被认为是最佳实践.jQuery鼓励这样做,但没有理由你不能在任何库或普通的JS中做到这一点.

对策:

• 在jQuery的return false手段既preventDefault和stopPropagation,因此,如果您关心接收事件通知父元素的含义是不同的;
• jQuery将它隐藏在这里,但preventDefault/ stopPropagation通常在IE中拼写不同(returnValue/ cancelBubble).

然而:

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

Answer 2

我能想到的唯一优势就是javascript:void(0)即使是最老的浏览器也会支持它.也就是说,我会使用你提到的其他不引人注目的方法之一:

• 对于大多数用途,event.preventDefault()并且return false可以互换使用.
• event.preventDefault()将根据需要阻止页面重新加载,但会允许click事件冒泡到父级.如果你想停止冒泡,你可以结合使用它event.stopPropagation.
• return false 另外会阻止事件冒泡到父母.

我在上面的第一点说'可互换',因为很多时候我们不关心事件是否会影响到父母.然而,当你需要一些微调,我们应该考虑分两个和三个.

请考虑以下示例:

<div>Here is some text <a href="www.google.com">Click!</a></div>?

$("a").click(function(e) {
    e.preventDefault();
});

$("div").click(function() {
    $(this).css("border", "1px solid red");
});
?

单击锚点将阻止触发事件的默认操作,因此浏览器不会重定向到www.google.com.但是,事件仍会"冒泡"并导致div的点击事件触发,这会在其周围添加边框.添加e.stopPropagation() 或只是 return false和div的点击事件不会触发.你可以在这里弄乱它:http://jsfiddle.net/cMKsN/1/