制作空链接的方法不同？

Question

除了这些方法之外,有没有办法建立空链接？

<a href="javascript:;">Example</a>

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

<a href="#">Example</a>

我不介意使页面跳到顶部的东西,但我不希望它改变地址栏中的URL.理想的链接将是与维基百科上的导航框中的特征相似的链接,但是除了与眼睛相关之外,还有更多的链接,因为它具有与之相关的相当大的脚本.我只是想找一些东西放进a标签.

提前致谢.

Answer 1

你只想要一些可以推入<a>标签的东西？好:

<a href="#" onclick="return false;">Example</a>

将它与href=您问题中的任何方法结合使用.

鉴于一个不能去任何地方的链接是相当无用的,我可以假设你想在点击链接时启动一些JavaScript功能吗？如果是,请执行以下操作:

<a href="#" onclick="yourFunctionHere(); return false;">Example</a>

Answer 2

#方法是最简单的,并且始终兼容.使用href =#然而,将跳转到页面顶部.要防止跳转,只需引用一个未命名的锚点.像这样:

<a href=#nothing >This link has a null href!</a>

<a href=#doesnotexist >This link has a null href!</a>

<a href=#null >This link has a null href!</a>

<a href=#void >This link has a null href!</a>

<a href=#whatever >This link has a null href!</a>

Answer 3

不，所有可能有效的替代方案都不是 IMO。我使用 Chrome 和 Firefox 进行了以下实验，设法确定了问题和答案中已经建议的替代方案的 2 个额外替代方案。

失败的那些（非空链接）：

这个根本没有呈现为链接，也不能点击。

<a>null-link-1</a>

单击时的下一个选择，移动到文档开始 -不是空链接。

<a href="">null-link-2</a>

单击下一个选项时，导航离开文档 -而不是空链接。

<a href=";">null-link-3</a>

单击时的下一个选择，当单击时，移动到文档开始 -而不是空链接。

<a href="" onclick="javascript:;">null-link-4</a>

现在，这里是有效的：真正的空链接：

下面的两个选项，当点击时，什么都不做——空链接？是的。

<a href="" onclick="return false;">null-link-5</a>

另一个与上面的几乎相同，但提供了一个真正的替代方案，主要是为了它的简洁性。

<a href="" onclick="return !1;">null-link-6</a>

注意：我的工作解决方案与nnnnnn的主要区别之一是我更喜欢空白href，否则，它们的工作原理完全相同。

Answer 4

维基百科使用第三种选择.要使用它,您可以使用此HTML:

<a href="#">link</a>

然后使用JavaScript附加事件处理程序:

// I assume `link` is set the element shown above.
link.addEventListener('click', function(e) {
    alert("You clicked me!");
    e.preventDefault();
    e.stopPropagation();
    return false;
}, false);

addEventListener应该在大多数现代浏览器中工作,但为了更兼容和更简洁,您可能希望使用像jQuery这样的JavaScript库:

$("a").click(function() {
    alert("You clicked me!");
    return false;
});

Answer 5

创建空链接的不同方法。

<a href="#!">Example link</a>

或者

<a href="#" onclick="return false;">Example link</a>