"的javascript：无效（0）;" vs“return false” vs“preventDefault（）” [英] "javascript:void(0);" vs "return false" vs "preventDefault()"

问题描述

当我想要一些链接而不做任何事情但只响应javascript动作时，什么是避免链接滚动到页面顶部边缘的最佳方法？

我知道几种方法，它们似乎都运行正常：

When I want some link to not do anything but only respond to javascript actions what's the best way to avoid the link scrolling to the top edge of the page ?
I know several ways of doing it, they all seem to work fine :

<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>

您有偏好吗？为什么？在哪些条件？

Do you have any preference ? why ? in which conditions ?

PS：当然上面的例子假设你使用的是jquery但是mootools或者原型的等价物。

PS: of course the above examples assume you're using jquery but there's equivalents for mootools or prototype.

推荐答案

绑定：

• javascript：在任何时候都要避免使用URL;


• 内联事件处理程序属性也不是很好，但可以进行一些快速开发/测试;


• 从脚本绑定，保持标记清洁，通常被认为是最佳实践。 jQuery鼓励这样做，但没有理由你不能在任何库或普通JS中做到这一点。

• javascript: URLs are a horror to be avoided at all times;
• 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 中返回false 表示 preventDefault 和 stopPropagation ，所以如果你关心接收事件通知的父元素，意思是不同的;


• jQuery将它隐藏在这里但 preventDefault / stopPropagation 通常必须在IE中拼写不同（ returnValue / cancelBubble ）。

• 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 is hiding it here but preventDefault/stopPropagation have to be spelled differently in IE usually (returnValue/cancelBubble).

但是：

• 您的链接不是链接。它没有链接到任何地方;这是一个动作。 < a> 并不是理想的标记。如果有人试图对其进行中间点击，或者将其添加到书签或链接所具有的任何其他功能上，那就会出错。


• 对于确实指向某事的情况，就像它打开/关闭页面上的另一个元素一样，将链接设置为指向 #thatelementsid 并使用不显眼的脚本从链接名称中获取元素ID。您还可以在文档加载时嗅探 location.hash 以打开该元素，因此该链接在其他上下文中变得有用。


• 否则，对于纯粹是动作的东西，最好将其标记为：< input type =button> 或 < button type =button> 。如果需要，您可以使用CSS来设置样式，使其看起来像链接而不是按钮。


• 然而，在IE和Firefox中，按钮样式的某些方面是无法摆脱的。它通常并不重要，但如果你真的需要绝对的视觉控制，那么折衷就是使用< span> 。您可以添加 tabindex 属性，使其在大多数浏览器中都可以通过键盘访问，尽管这不是真正标准化的。您还可以检测其上的Space或Enter等按键以激活。这有点令人不满意，但仍然非常受欢迎（SO，对于其中一个，就像这样）。


• 另一种可能性是< input type =image > 。这具有完全可视控制按钮的可访问性优势，但仅适用于纯图像按钮。

• 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.
• 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.
• 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.
• 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).
• Another possibility is <input type="image">. This has the accessibility advantages of the button with full visual control, but only for pure image buttons.

这篇关于"的javascript：无效（0）;" vs“return false” vs“preventDefault（）”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！