“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意味着preventDefaultstopPropagation ,所以如果你关心接收事件通知的父元素,意思是不同的;
  • 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派是别的 – 他们导致默认的行动是“什么都不做”。

这是一个风格问题。 你想在onc​​lick上做所有的工作,还是希望能够在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>