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:网址在任何时候都是可怕的;
内联事件处理程序属性也不是很好，但可以进行一些快速开发/测试;
从脚本绑定，保持标记清洁，通常被认为是最佳实践。 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()会阻止页面根据需要重新加载，但会允许点击事件冒泡到父级。如果您想停止冒泡，可以将其与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/

Answer 3

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

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

它很小，它不会跳闸和锚定，它与库不可知。

Answer 4

我倾向于使用return false，因为这样可以让用户选择是否继续执行该操作，如此处所示，在quirksmode中：

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

这很简单，虽然很旧，但无论javascript的版本如何，它都可以正常运行，跨浏览器。

Answer 5

event.preventDefault()和return false;是一回事 - 它们指示浏览器不处理事件的默认操作（在这种情况下，导航到单击的锚标记的href）。 href=javascript:及其他类似的东西 - 它们导致默认操作“无所事事”。

这是一个风格问题。你想在onclick上做你所有的工作，或者你是否希望能够在onclick和href中同时执行操作并依赖浏览器的功能来调整两者之间的工作？

Answer 6

我喜欢在链接中使用href="javascript:void(0)"，因为#意味着跳到页面顶部，如果由于某种原因你的jQuery事件没有加载，那么事实上可能会发生这种情况。 jQuery无法加载。

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

HTML：

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

jQuery示例1：

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

jQuery示例2：

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

由于invalidCode();将抛出错误return false从未到达，如果使用jQuery示例1，则用户将被重定向到Google，而在jQuery示例2中，他将不会。

Answer 7

我认为我已经看过javascript：;随着网络的发展，很难跟踪那些可用的技巧..但这主要是关于可访问性（除了javascript：void（0）;）并且只是一个小的修正不是javascript：void（0）但是javascript：void（0）;这意味着什么都不做就像返回假;虽然不确定javascript：return false;做同样的事情..

我总是使用并建议使用javascript：void（0）;出于几个原因......当然是我的拙见。

1。）我使用它是因为上面提到的人... href =＆＃34;＃＆＃34;这是不合适的，因为它可能表明上升，甚至在那种情况下＃top;＃top＆＃39;对于那种情况会更合适。但是这也可以触发代码中使用＃（散列）的其他东西，所以另一个原因是避免与可能使用＃的其他javascript冲突。我倾向于在使用插件时寻找这个，并立即替换它们.href =＆＃39;＃＆＃39; to href =＆＃39; javascript：void（0）;＆＃39;或者href =＆＃39; javascript：;＆＃39;

2。）如果我想为一组特定的Anchor标签重用一个函数，我可以在任何属性上使用选择器调用它，而不必担心检测到click事件并阻止默认操作而且我没有甚至将其视为发展偏好。

3.。）在大多数情况下，如果您使用javascript进行链接构建：void（0）;尝试将链接作为旧的href = rel = nofollow进行跟踪，以避免索引作为操作的链接。我不太确定这个只是因为我听说爬行器和机器人现在甚至可以读取Flash，所以如果他们可以阅读javascript链接就不会感到惊讶

4。）从2.）开始，您可以使用href =＆＃34; javascript：void（0）;＆＃34;来定位类似的类并忘记阻止单击事件默认操作。然后直接从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
        });

});

我觉得使用课程感觉更舒服，因为你总能做到......

$（一个＃ - 您-ID）.hasClass（-yourclass - ）

或任何其他有趣的组合，并影响许多链接..所以我真的不建议单独使用A作为选择器..

通常我在这里建议的是：

  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();
        });

});

Answer 8

我宁愿不把JavaScript放到href中，因为这不是它的意思。我喜欢像

这样的东西

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

“JavaScript的：无效（0）;” vs“return false”vs“preventDefault（）”

8 个答案:

HTML：

jQuery示例1：

jQuery示例2：