“javascript:void(0);”vs“return false”vs“preventDefault()”

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 :

当我想要链接什么都不做但只响应javascript的动作时，最好的方法是避免链接滚动到页面的顶部边缘?我知道有几种方法，它们似乎都很有效:

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

or

或

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

and even :

甚至:

<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: of course the above examples assume you're using jquery but there's equivalents for mootools or prototype.

当然，上面的例子假设您正在使用jquery，但是有与mootools或prototype相同的东西。

8 个解决方案

#1

Binding:

绑定:

• javascript: URLs are a horror to be avoided at all times;
• javascript: url在任何时候都是可怕的，必须避免;
• 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鼓励这样做，但是没有理由不能在任何库或普通的JS中这样做。

Responses:

回复:

• 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中，返回false意味着preventDefault和stopPropagation，所以如果您关心接收事件通知的父元素，那么其含义是不同的;
• jQuery is hiding it here but preventDefault/stopPropagation have to be spelled differently in IE usually (returnValue/cancelBubble).
• jQuery隐藏在这里，但是在IE中，preventDefault/stopPropagation通常是不同的(returnValue/cancelBubble)。

However:

然而:

• 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.
• 对于某些情况，比如当它打开/关闭页面上的另一个元素时，设置链接指向elementsid并使用不引人注目的脚本从链接名称中获取元素ID。您还可以嗅探位置。哈希文件加载以打开该元素，因此该链接在其他上下文中变得有用。
• 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.
• 否则，对于纯粹的操作，最好将其标记为:或。如果需要的话，您可以用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).
• 然而，在IE和Firefox中，按钮样式的某些方面是无法完全摆脱的。这通常并不重要，但是如果你真的需要绝对的视觉控制，那么妥协就是使用一个。您可以添加一个tabindex属性，使它在大多数浏览器中都可以访问键盘，尽管这并不是真正标准化的。你也可以检测到空格或进入它来激活。这有点不令人满意，但仍然很受欢迎(因此，举个例子，它是这样的)。
• Another possibility is <input type="image">. This has the accessibility advantages of the button with full visual control, but only for pure image buttons.
• 另一种可能是。这具有完全视觉控制的按钮的可访问性优势，但仅限于纯图像按钮。

#2

The only advantage that I can think of to using javascript:void(0) is that it will be supported even by the oldest browsers. That said, I would use one of the other unobtrusive approaches you have mentioned:

我认为使用javascript:void(0)的唯一优点是即使最老的浏览器也会支持它。也就是说，我将使用你提到的其他不显眼的方法之一:

• For most uses, event.preventDefault() and return false can be used interchangeably.
• 对于大多数用途，event.preventDefault()和return false可以互换使用。
• event.preventDefault() will prevent the page from reloading, as desired, but will allow the click event to bubble up to the parent. If you want to stop the bubbling, you can use it in conjunction with event.stopPropagation.
• preventdefault()将阻止根据需要重新加载页面，但将允许单击事件冒泡到父类。如果想要停止冒泡，可以将其与event.stopPropagation结合使用。
• return false will additionally stop the event from bubbling up to the parent.
• 返回false将阻止事件冒泡到父进程。

I say 'interchangeably' in the first point above because much of the time we do not care whether or not an event bubbles up to the parent(s). However, when do we need some fine-tuning, we should consider points two and three.

我在上面的第一点说“互换”，因为大多数时候我们并不关心事件是否会冒泡到父事件。然而，当我们需要一些微调时，我们应该考虑第二点和第三点。

Consider the following example:

考虑下面的例子:

<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");
});
​

Clicking on the anchor will prevent the default action of the event from being triggered, so the browser will not redirect to www.google.com. However, the event will still 'bubble up' and cause the div's click event to fire, which will add a border around it. Add e.stopPropagation() or just return false and the div's click event will not fire. You can mess with it here: http://jsfiddle.net/cMKsN/1/

点击锚点将阻止事件的默认动作被触发，所以浏览器不会重定向到www.google.com。但是，事件仍然会“冒泡”，并导致div的点击事件触发，这将添加一个边框。添加e.stopPropagation()或仅仅返回false, div的单击事件将不会触发。您可以在这里使用它:http://jsfiddle.net/cMKsN/1/

#3

I like using href="javascript:void(0)" in the link as # implies jumping to the top of the page and that may in fact happen if for some reason your jQuery event does not load e.g. jQuery fails to load.

我喜欢在链接中使用href="javascript:void(0)"，这意味着跳转到页面的顶部，这可能会发生，如果由于某些原因，您的jQuery事件没有加载，例如jQuery无法加载。

I also use event.preventDefault(); as it will not follow the link even if an error is encountered before return false; for example:

我还用event.preventDefault();因为即使在返回false之前遇到错误，它也不会跟随该链接;例如:

HTML:

<a id="link" href="http://www.google.com">Test</a>

jQuery Example 1:

$("#link").click(
    function(){
        alert("Hi");
        invalidCode();
        return false;
    }
);

jQuery Example 2:

$("#link").click(
    function(event){
        event.preventDefault();
        alert("Hi");
        invalidCode();
        return false;
    }
);

Since invalidCode(); will throw an error return false is never reached and if jQuery Example 1 is used the user will be redirected to Google whereas in jQuery Example 2 he will not.

自从invalidCode();如果使用jQuery示例1，用户将被重定向到谷歌，而在jQuery示例2中，用户不会被重定向到谷歌。

#4

I tend to prefer using return false, as that gives the option to give the user a choice whether to continue that action, such as shown here, in quirksmode:

我倾向于使用返回false，因为它提供了一个选项，让用户可以选择是否继续执行该操作，如在这里所示，在quirksmode中:

http://www.quirksmode.org/js/events_early.html#default

http://www.quirksmode.org/js/events_early.html默认

It's simple, it's old, but it works well, cross-browser, regardless of the version of javascript.

它很简单，很老，但是它在跨浏览器上运行得很好，不管javascript是什么版本。

#5

event.preventDefault() and return false; are one thing - they instruct the browser not to process the default action for the event (in this case, navigating to the href of the anchor tag that was clicked). href=javascript: and its ilk are something else - they're causing the default action to be 'do nothing'.

event.preventDefault()返回false;是一件事——他们指示浏览器不要处理事件的默认动作(在本例中，是导航到被单击的锚标记的href)。href=javascript:它的同类是其他东西——它们导致默认的操作是“什么都不做”。

It's a question of style. Do you want to do all your work in the onclick, or do you want to be able to put actions in both the onclick and the href and rely on the capabilities of the browser to modulate between the two?

这是风格的问题。您希望在onclick中完成所有工作，还是希望能够在onclick和href中放置操作，并依赖浏览器的功能在两者之间进行调整?

#6

I think that I have seen as well javascript:; around as the web develops, is hard to keep track to the tricks that are available out there.. but this is mainly about accessability (besides javascript:void(0); ) and just a small correction is not javascript:void(0) but javascript:void(0); which means do nothing so pretty much as return false; although not sure if javascript:return false; does the same..

我想我也见过javascript:;随着网络的发展，很难跟踪现有的技巧。但这主要是关于可访问性的(除了javascript:void(0);)一个小小的修正不是javascript:void(0)而是javascript:void(0);也就是说，除了返回false，什么都不做;虽然不确定javascript:返回false;做了同样的事情。

I always use and would suggest to use javascript:void(0); for a couple of reasons.. in my humble opinion, of course.

我一直使用并建议使用javascript:void(0);有几个原因。当然，以我的拙见。

1.) I use it because of the same someone mentioned above.. href="#" is not appropriate as it might indicate going to the top and even in that case '#top' would be more adequate for that case. But also this can trigger something else in your code that makes use of # (hashes) so another reason is to avoid conflicts with other javascript that might be using #. And I tend to look for this when using a plugin for example, and replace them immediately.. href='#' to href='javascript:void(0);' or href='javascript:;'

1)。我使用它是因为上面提到的那个人。href="#"是不合适的，因为它可能指示到顶部，即使在这种情况下，'#top'将更适合这种情况。但这也会在代码中引发使用#(散列)的其他东西，因此另一个原因是避免与可能使用#的其他javascript发生冲突。我倾向于在使用插件的时候寻找它，并立即替换它们。href='#' to href='javascript:void(0);'或href='javascript: ';'

2.) If I want to re-use a function for a group of specific Anchor tags, I can call it with the selector on any attribute without worrying about detecting the click event and preventing the default action and I do it without even thinking of it as a development preference.

2)。如果我想要为一组特定的锚标记重用一个函数，我可以在任何属性上使用选择器调用它，而不用担心检测单击事件并阻止默认操作，我甚至不用将它视为开发首选项。

3.) In most cases if you are doing link building using javascript:void(0); tries to make a link to not be followed as the old href= rel=nofollow so it avoid indexing links that are actions. I'm not so sure about this one merely because I heard that crawlers and robots can now read even Flash so would not be surprised if they can read javascript links

3)。在大多数情况下，如果使用javascript:void(0)进行链接构建;尝试创建一个不被跟踪的链接，因为旧的href= rel=nofollow，因此它避免对作为操作的链接进行索引。我不太确定这一点，仅仅是因为我听说爬虫和机器人现在甚至可以读取Flash，所以如果它们能够读取javascript链接，也不会感到惊讶

4.) Referring from 2.) you can target on a class like and forget about preventing the click event default action by using a href="javascript:void(0);" and then targetting the class directly from the selector at the jQuery function.

4)。引用2)您可以针对类似的类，而不用使用href=“javascript:void(0)”来阻止单击事件默认操作，然后直接从jQuery函数的选择器获取类。

        jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]') ... off('click').on('click',function()

            //from the class
            $('a.-the-class') ... off('click').on('click',function()

            //from the id

            $('a#-the-id').off('click').on('click',function()
            {
            --do something with this link
        });

}); 

I rather feel more comfortable using the class as you can always do...

我更喜欢用这门课，因为你总是可以这么做……

$(a#-your-id).hasClass(-yourclass-)

#你的身份证(美元).hasClass(-yourclass)

or any other interesting combination and affect many links.. so I really won't suggest to use the A as a selector solely..

或其他有趣的组合并影响许多链接。所以我真的不建议只使用A作为选择器。

Normally what I see in here being suggested is this:

通常我在这里看到的建议是:

  jQuery(function($)
        {
            //from the rel
            $('a[rel="-your-rel-id"]').on('click',function(event)
            //do something
            //prevent the click as is passed to the function as an event
            event.preventDefault();
        });

});

#7

Dreamweaver uses a nice little trick by default that I've started using.

Dreamweaver默认使用了一个我已经开始使用的小技巧。

<a href='javascript:;'></a>

It's small, it doesn't trip and anchors and it's library agnostic.

它很小，不会被绊倒和锚点，而且它是图书馆不可知论者。

#8

I'd rather not put JavaScript into the href because that's not what it's meant for. I prefer something like

我不想把JavaScript放到href中，因为这不是它的目的。我更喜欢这样

<a href="#" onclick="return handler();">Link</a>