“javascript：void（0）;”vs“return false”vs“preventDefault（）”
当我想要一些链接不做任何事情，但只响应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或原型。
捆绑：
-
javascript:url是一个可以随时避免的恐怖; - 内联事件处理程序的属性也不是很好，但可以进行一些快速开发/testing;
- 从脚本绑定，留下标记干净，通常被认为是一个最佳做法。 jQuery鼓励这一点，但没有理由不能在任何库或普通的JS中做到这一点。
对策：
- 在jQuery中，
return false意味着preventDefault和stopPropagation，所以如果你关心接收事件通知的父元素，意思是不同的; - jQuery隐藏它在这里，但通常IE（
returnValue/cancelBubble）中cancelBubble/stopPropagation必须拼写不同。
然而：
- 你有一个不是链接的链接。 它没有链接到任何地方; 这是一个行动。
<a>并不是真正的理想标记。 如果有人试图中途点击它，或者将其添加到书签或链接的其他任何可供性，它将会出错。 - 对于实际上指向某些内容的情况，例如打开/closures页面上的另一个元素时，将链接设置为指向
#thatelementsid并使用不显眼的脚本从链接名称中获取元素ID。 您也可以在文档加载中嗅探location.hash.hash以打开该元素，以便该链接在其他上下文中变得有用。 - 否则，对于纯粹是动作的东西，最好将其标记为一个：
<input type="button">或<button type="button">。 如果需要，可以使用CSS来devise它的样式，而不是button。 - 但是，在IE和Firefox中，你不能完全摆脱button样式的某些方面。 这通常不是很重要，但是如果你真的需要绝对的视觉控制的话，一个妥协就是用
<span>代替。 您可以添加一个tabindex属性，使其可以在大多数浏览器中进行键盘访问，尽pipe这并不是真正标准化的。 您也可以检测按键，如Space或Enter来激活。 这是一种令人不满意的，但仍然相当受欢迎（所以，这是这样的）。 - 另一种可能性是
<input type="image">。 这具有完全的视觉控制button的可访问性优势，但只有纯图像button。
我能想到使用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"); });
点击锚点将阻止事件的默认动作被触发，所以浏览器将不会redirect到www.google.com。 然而，这个事件仍然会“冒泡”，导致div的点击事件触发，这会在它周围增加一个边框。 添加e.stopPropagation() 或只 return false ，div的点击事件不会触发。 你可以在这里搞砸了： http : //jsfiddle.net/cMKsN/1/
我喜欢在链接中使用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，用户将被redirect到谷歌，而在jQuery示例2中，他不会。
我倾向于使用return false ，因为这样可以让用户select是否继续该操作，例如在quirksmode中显示的：
http://www.quirksmode.org/js/events_early.html#default
这很简单，它是旧的，但它运行良好，跨浏览器，无论JavaScript的版本。
event.preventDefault()并return false; 是一件事 – 它们指示浏览器不要处理事件的默认动作（在这种情况下，导航到被点击的定位标记的href）。 href=javascript:和其他stream派是别的 – 他们导致默认的行动是“什么都不做”。
这是一个风格问题。 你想在onclick上做所有的工作，还是希望能够在onclick和href中进行操作，并依靠浏览器的function来调整两者之间的关系？
我认为我也看到了javascript :; 但是这主要是关于可访问性的（除了javascript：void（0）;），只是一个小的修正不是javascript：void（0）但是javascript：void（0）; 这意味着什么也不做，就像返回false一样。 虽然不确定如果javascript：返回false; 也是一样..
我总是使用，并会build议使用javascript：void（0）; 有几个原因，当然，我认为是愚蠢的。
1）我使用它是因为上面提到的同一个人。href =“＃”是不合适的，因为它可能表明到顶部，甚至在这种情况下'#top'将更适合这种情况。 但是，这也可能会触发代码中的其他内容，以便使用＃（哈希），所以另一个原因是避免与可能使用＃的其他JavaScript冲突。 我倾向于寻找这个例子时，使用插件，并立即将其replace.. href ='＃'到href ='javascript：void（0）;' 或href ='javascript :;'
2.）如果我想重新使用一组特定的Anchor标记的function，我可以用任何属性的select器调用它，而不必担心检测点击事件，并防止默认的行为，我甚至不考虑这是一个发展偏好。
3.）在大多数情况下，如果你正在使用javascript：void（0）; 试图做一个链接，不作为旧的href = rel = nofollow，因此它避免索引作为行动的链接。 我不太确定这一点，因为我听说爬虫和机器人现在甚至可以读取Flash，所以如果他们可以阅读JavaScript链接，不会感到惊讶
4.）从2）引用你可以针对一个类似的而忘记通过使用href =“javascript：void（0）;”来防止点击事件的默认行为 然后在jQuery函数中直接从select器中定位类。
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 }); });
我总是比较自在地使用class级
$（A＃ – 您-ID）.hasClass（-yourclass-）
或任何其他有趣的组合，并影响很多链接..所以我真的不会build议使用A作为一个select器..
通常我在这里看到的build议是这样的：
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(); }); });
Dreamweaver默认使用了一个很好的小窍门，我已经开始使用了。
<a href='javascript:;'></a>
这是小的，它不旅行和锚定，它是图书馆不可知论者。
我宁愿不把JavaScript放入href因为这不是它的意思。 我更喜欢类似的东西
<a href="#" onclick="return handler();">Link</a>
