Javascript 制作空链接的不同方法?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7494965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Different methods to make a null link?
提问by ZeroGravity
Is there a way to make a null link besides these methods?
除了这些方法之外,还有没有办法制作空链接?
<a href="javascript:;">Example</a>
<a href="javascript:void(0);">Example</a>
<a href="#">Example</a>
I don't mind something that makes the page jump to the top but I don't want it to alter the URL in the address bar. The ideal link would be one as similar as possible to the ones featured on navigation boxes on Wikipediabut there is much more to that link than meets the eye as it has a pretty large script associated with it. I'm just looking for something to put into the a
tag.
我不介意让页面跳到顶部的东西,但我不希望它改变地址栏中的 URL。理想的链接应该尽可能类似于维基百科导航框上的链接,但该链接的内容远不止眼前一亮,因为它有一个相当大的脚本与之相关联。我只是在寻找可以放入a
标签的东西。
Thanks in advance.
提前致谢。
回答by nnnnnn
You just want something you can shove in the <a>
tag? OK:
你只是想要一些可以塞进<a>
标签的东西?好的:
<a href="#" onclick="return false;">Example</a>
Combine it with any of the href=
methods from your question.
将其与href=
您问题中的任何方法结合使用。
Given that a link that doesn't go anywhere is fairly useless, can I assume you want to kick off some JavaScript function when the link is clicked? If so, do this:
鉴于一个不会去任何地方的链接是相当无用的,我可以假设您想在点击链接时启动一些 JavaScript 函数吗?如果是这样,请执行以下操作:
<a href="#" onclick="yourFunctionHere(); return false;">Example</a>
回答by donmega
The # method is the simplest, and is always compatible. Using a href=# however, will jump to the top of the page. To prevent the jump, simply reference an unnamed anchor. Like this:
# 方法是最简单的,并且始终兼容。但是,使用 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>
回答by icktoofay
Wikipedia uses the third option. To use that, you can use this HTML:
维基百科使用第三个选项。要使用它,您可以使用以下 HTML:
<a href="#">link</a>
And then attach an event handler with JavaScript:
然后使用 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
should work in most modern browsers, but to be more compatible and more concise, you may wish to use a JavaScript library like jQuery:
addEventListener
应该适用于大多数现代浏览器,但为了更兼容和更简洁,您可能希望使用像jQuery这样的 JavaScript 库:
$("a").click(function() {
alert("You clicked me!");
return false;
});
回答by nemesisfixx
No, all the potentially validalternatives are not done IMO. I made the following experiments with Chrome and Firefox, managing to identify 2 extra alternatives to the ones already suggested in the question and the answers.
不,所有可能有效的替代方案都不是 IMO。我使用 Chrome 和 Firefox 进行了以下实验,设法确定了问题和答案中已经建议的替代方案的 2 个额外替代方案。
The ones that failed (NOT null links):
失败的那些(非空链接):
This one is not rendered as a link at all, and isn't clickable either.
这个根本没有呈现为链接,也不能点击。
<a>null-link-1</a>
The next alternative when clicked, moved to document start - not a null link.
单击时的下一个选择,移动到文档开始 -不是空链接。
<a href="">null-link-2</a>
The next alternative when clicked, navigates away from document - not a null link.
单击下一个选项时,导航离开文档 -而不是空链接。
<a href=";">null-link-3</a>
The next alternative when clicked, when clicked, moves to document start - not a null link.
单击时的下一个选择,当单击时,移动到文档开始 -而不是空链接。
<a href="" onclick="javascript:;">null-link-4</a>
Now, here are the ones that worked : True Null Links:
现在,这里是有效的:真正的空链接:
Both of the alternatives below, when clicked, do strictly nothing - null links? YES.
下面的两个选项,当点击时,什么都不做——空链接?是的。
<a href="" onclick="return false;">null-link-5</a>
This other one is almost the same as the above, but is offered as a true alternative, mostly for its brevity.
另一个与上面的几乎相同,但提供了一个真正的替代方案,主要是为了它的简洁性。
<a href="" onclick="return !1;">null-link-6</a>
NOTE:One of the key differences between my working solutions and those of nnnnnn, is my preference of a blank href
, otherwise, they work on the very same principle.
注意:我的工作解决方案与nnnnnn的主要区别之一是我更喜欢空白href
,否则,它们的工作原理完全相同。
回答by Huseyin
Different methods to make a null link.
制作空链接的不同方法。
<a href="#!">Example link</a>
OR
或者
<a href="#" onclick="return false;">Example link</a>
回答by Pankaj Upadhyay
I think you could do well by leaving the href empty altogether, this will show the link to current page :
我认为您可以将 href 完全留空,这将显示当前页面的链接:
<a href="" >Example</a>