"javascript:void(0);" vs “返回假” vs “preventDefault()”

IT技术 javascript jquery
2021-02-24 23:47:11

当我想要一些链接不做任何事情而只响应 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 或原型的等价物。

6个回答

捆绑:

  • javascript: URL 是一种应始终避免的恐怖内容;
  • 内联事件处理程序属性也不是很好,但对于一些快速开发/测试来说还可以;
  • 从脚本绑定,使标记保持干净,通常被认为是最佳实践。jQuery 鼓励这样做,但没有理由不能在任何库或普通 JS 中执行此操作。

回应:

  • 在 jQuery 中return false同时表示preventDefaultstopPropagation,所以如果您关心接收事件通知的父元素,则含义是不同的;
  • jQuery 将它隐藏在这里,但preventDefault/stopPropagation必须在 IE 中通常拼写不同(returnValue/ cancelBubble)。

然而:

  • 您有一个不是链接的链接。它不会链接到任何地方;这是一个动作。<a>不是真正的理想标记。如果有人试图用中键单击它,或将其添加到书签或链接具有的任何其他可见性,则会出错。
  • 对于它确实指向某些内容的情况,例如当它打开/关闭页面上的另一个元素时,将链接设置为指向#thatelementsid并使用不显眼的脚本从链接名称中获取元素 ID。您还可以嗅探location.hash文档加载以打开该元素,因此该链接在其他上下文中变得有用。
  • 否则,对于纯粹是一个动作的东西,最好将其标记为 one:<input type="button"><button type="button">如果需要,您可以使用 CSS 将其设置为链接而不是按钮的样式。
  • 但是,在 IE 和 Firefox 中,您无法完全摆脱按钮样式的某些方面。它通常并不重要,但如果您确实需要绝对的视觉控制,则可以使用 a<span>来代替。您可以添加一个tabindex属性以使其在大多数浏览器中可以通过键盘访问,尽管这并没有真正标准化。您还可以检测诸如 Space 或 Enter 之类的按键以激活。这有点令人不满意,但仍然很受欢迎(所以,例如,它是这样的)。
  • 另一种可能性是<input type="image">这具有具有完全视觉控制的按钮的可访问性优势,但仅适用于纯图像按钮。
Stephen P - 完全同意,除了暗示 MVC 是“正确的事情”:) 这只是组织事物的一种方式(公认的流行),并且与其他所有事物一样有缺点。
2021-04-19 23:47:11
感谢您的完整回复。我从来没有真正这样想过……但现在对我来说很清楚它不应该是一个链接。我将尝试上述技术输入/跨度,看看哪种更适合。@casablanca 我不太同意,我写了第一个例子,但我从未真正使用过它。就像我讨厌在我的 html 中看到 css 一样,我真的认为 javascript 代码应该始终不引人注目并保留在外部文件中。
2021-04-30 23:47:11
我完全同意“内联事件处理程序属性也不出色”。它们对于快速原型设计来说可能很简单,但是当您必须添加第二个处理程序时,您很快就会在附加处理程序的方式上变得不一致,并且不一致会导致错误。链接应该独立工作,如 bobince 状态,并增强它以执行奇特的壮举应该是控制器的一部分,应该与模型视图分开
2021-04-30 23:47:11
+1 但我不同意“内联事件处理程序属性也不出色”。除非您需要多个处理程序,否则标记属性onclick是迄今为止将事件处理程序附加到元素的最简单和最干净的方式。
2021-05-09 23:47:11
如果您永远不会需要一个特定事件和元素的多个侦听器函数并且了解您自己的想法,那么事件处理程序属性就没有问题。事实上,它们比其他任何一种立即工作的事件绑定方法都有优势,而不必等待其他脚本加载并进行绑定。
2021-05-16 23:47:11

我能想到的唯一优点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 的点击事件触发,这将在其周围添加边框。Add e.stopPropagation() or just return false不会触发 div 的点击事件。你可以在这里弄乱它:http : //jsfiddle.net/cMKsN/1/

@sje397 是的,如果你有event.preventDefault(); someFunction();并且 someFunction() 出现问题,默认事件仍然会停止。
2021-04-25 23:47:11
出于兴趣:event.precentdefault()如果在处理程序代码之后发生异常,在处理程序顶部调用是否有效?
2021-04-27 23:47:11
好吧,您对那里的浏览器支持有所了解,但也很好地解释了两个世界,停止传播和 preventDefault +1
2021-05-11 23:47:11

默认情况下,Dreamweaver 使用了我开始使用的一个不错的小技巧。

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

它很小,不会绊倒和锚定,而且它与图书馆无关。

@Mike:它实际上undefined在这两种情况下都评估为null是一个有效的 JavaScript 值,与undefined.
2021-04-16 23:47:11
@casablanca:仍然认为 (null == undefined) === true, (null === undefined) === false。
2021-04-23 23:47:11
我认为这和我的第一个例子是一样的。浏览器正在等待一个 url,在这两种情况下,表达式都将被评估为 null 或 undefined (null == undefined)。
2021-04-26 23:47:11
美丽的!这正是我所需要的!
2021-05-02 23:47:11

我倾向于使用return false,因为它可以让用户选择是否继续该操作,例如在 quirksmode 中显示的:

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

它很简单,它很旧,但它运行良好,跨浏览器,无论 javascript 版本如何。

event.preventDefault()并且return false;是一回事 - 它们指示浏览器不要处理事件的默认操作(在这种情况下,导航到被单击的锚标记的 href)。 href=javascript:它的同类是别的东西——它们导致默认操作是“什么都不做”。

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

event.preventDefault()return false;不是一回事
2021-04-26 23:47:11