制作一个什么都不做的 HTML 链接（实际上什么都不做）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8260546/
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
Make a HTML link that does nothing (literally nothing)
提问by ale
I want a link that does nothing. I don't want this:
我想要一个什么都不做的链接。我不想要这个：
<a href="#">
<a href="#">
because then the URL becomes something.com/whatever/#.
因为那时 URL 变为something.com/whatever/#.
The only reason I want a link is so the user can see that they can click on the text. JavaScript is being used to perform some action so I don't need the link to go anywhere but I need it to look like a link!
我想要链接的唯一原因是用户可以看到他们可以点击文本。JavaScript 被用来执行一些操作，所以我不需要链接去任何地方，但我需要它看起来像一个链接！
I could use some data attribute and tell me CSS to make elements look like links if they have this attribute but it seems a bit overkill.
我可以使用一些数据属性并告诉我 CSS 使元素看起来像链接，如果它们有这个属性，但这似乎有点矫枉过正。
回答by Curt
The following will prevent your href from being ran
以下将阻止您的 href 运行
<a href="#" onclick="return false;">
If you are using jQuery, event.preventDefault()can be used
如果你使用 jQuery，event.preventDefault()可以使用
回答by alexdets
Try this:
尝试这个：
<a href="javascript:void(0);">link</a>
回答by Alexander O'Mara
In HTML5, this is very simple. Just omit the hrefattribute.
在 HTML5 中，这很简单。只需省略该href属性。
<a>Do Nothing</a>From MDN on the a tag href attribute:
href
This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5.
href
这是定义超文本源链接的锚点的唯一必需属性，但在 HTML5 中不再需要。
What about the hand cursor on hover?
悬停时的手形光标怎么样？
The default styles for a browser may not change the cursor to a pointer, for atags with no href. You can universally change this with the following CSS.
浏览器的默认样式可能不会将光标更改为指针，对于a没有href. 您可以使用以下 CSS 进行普遍更改。
a {
cursor: pointer;
}<a>Do Nothing</a>However it's probably better to be more-selective about it, and apply it to only the elements you intend to add event handlers to.
但是，最好对它更有选择性，并将其仅应用于您打算向其添加事件处理程序的元素。
What about making it tab-focusable?
让它以标签为焦点怎么样？
Just add tabindex="0"to the element.
只需添加tabindex="0"到元素。
<a tabindex="0">Do Nothing</a>Does it makes sense to use an atag without a link?
使用a没有链接的标签有意义吗？
Usually no, it's probably better to use a buttonelement instead, and style it with CSS. But whatever you use, avoid using an arbitrary element like divwhen possible, as this is not semantic at all.
通常不会，最好使用button元素代替，并使用 CSS 对其进行样式设置。但是无论你使用什么，div尽可能避免使用任意元素，因为这根本不是语义。
回答by PeeHaa
Don't make it a link (although it is prefered to do it) and style it with CSS so that it looks like a link:
不要将其设为链接（尽管更喜欢这样做）并使用 CSS 对其进行样式设置，使其看起来像一个链接：
p.not-a-link { text-decoration: underline; cursor: pointer }
Or even better just make it a link and let the javascript function which is used e.preventDefault()to prevent the link.
或者更好的做法是将其e.preventDefault()设为链接，并让用于阻止链接的 javascript 函数。
Also add the link to the hrefso that users without JS enabled will still be able to use it (as a fallback).
还要添加到 的链接，href以便没有启用 JS 的用户仍然可以使用它（作为后备）。
回答by Scott Brown
<a href="javascript:;">Link text</a>- that's what I usually use
<a href="javascript:;">Link text</a>- 这就是我通常使用的
回答by Krafty Coder
We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding javascript:void(0);on the href.
我们可以使用 javascript void 来实现，这通常涉及对表达式的评估并返回 undefined，其中包括添加javascript:void(0);href。
The void operator is usually used merely to obtain an undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
void 运算符通常仅用于获取未定义的原始值，通常使用“void(0)”（相当于“void 0”）。在这些情况下，可以使用全局变量 undefined（假设它没有被分配给一个非默认值）。
a {
text-decoration: initial;
}<a href="javascript:void(0);"> This link actually does nothing when clicked</a>回答by 1-14x0r
one way which no one has mentioned is to point the href to an empty local file location like so
没有人提到的一种方法是将 href 指向一个空的本地文件位置，就像这样
<a href='\'>my dead link</a>
why? If you use a framework such as react or angular, the compiler will spit out some warnings which can make your log or console dirty. This technique will also prevent robots or spiders from incorrectly linking things.
为什么？如果您使用诸如 react 或 angular 之类的框架，编译器会发出一些警告，这可能会使您的日志或控制台变脏。这种技术还将防止机器人或蜘蛛错误地链接事物。
回答by amelvin
@Curt's answer will work, but you can use a cursor stylein css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.
@Curt 的答案会起作用，但您可以在 css 中使用光标样式使其看起来像一个链接，而无需担心生成虚假链接。根据浏览器的一致性使用手或指针。
Cross browser conformant pointer css (from cursor styleguide):
跨浏览器一致性指针 css（来自光标样式指南）：
element {
cursor: pointer;
cursor: hand;
}
回答by Bryce
DONT USE <a>... instead use <span class='style-like-link'>and then use the class to style it however you want.
不要使用<a>......而是使用<span class='style-like-link'>然后使用该类来设置您想要的样式。
