blocks|key|721209|text|以下将阻止运行您的href|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721210|<a+href="#"+onclick="return+false;">|code-block|syntax|javascript|721211|如果使用的是jQuery，则可以使用event.preventDefault()|offset|length|style|CODE|721212|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/event.preventDefault/^0|0|0|I|M|I|M|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

The following will prevent your href from being ran

<pre><code>&lt;a href="#" onclick="return false;"&gt;
</code></pre>

If you are using jQuery, <a href="http://api.jquery.com/event.preventDefault/"><code>event.preventDefault()</code></a> can be used

blocks|key|505155|text|<a+href="javascript:;">Link+text</a>+-这是我通常使用的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|505156|entityMap^0|0|10|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<code>&lt;a href="javascript:;"&gt;Link text&lt;/a&gt;</code> - that's what I usually use

blocks|key|505202|text|不要让它成为一个链接(尽管它是首选的)，并用CSS设置样式，让它看起来像一个链接：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505203|p.not-a-link+{+text-decoration:+underline;+cursor:+pointer+}+|code-block|syntax|javascript|505204|或者更好的做法是将其设置为链接，并让使用e.preventDefault()的javascript函数阻止该链接。|offset|length|style|CODE|505205|另外，将该链接添加到href，以便没有启用JS的用户仍然可以使用它(作为备用)。|505206|entityMap^0|0|0|K|I|0|A|4|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

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:

<pre><code>p.not-a-link { text-decoration: underline; cursor: pointer } 
</code></pre>

Or even better just make it a link and let the javascript function which is used <code>e.preventDefault()</code> to prevent the link.

Also add the link to the <code>href</code> so that users without JS enabled will still be able to use it (as a fallback).

blocks|key|721341|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|721342|<a+href="javascript:void(0);">link</a>|code-block|syntax|javascript|721343|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>&lt;a href="javascript:void(0);"&gt;link&lt;/a&gt;
</code></pre>

blocks|key|721386|text|@Curt的答案是可行的，但是你可以在css中使用cursor+style让它看起来像一个链接，而不需要生成一个假链接。根据浏览器一致性使用手形或指针。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|721387|跨浏览器一致性指针css+(来自cursor+style指南)：|721388|element+{
++++cursor:+pointer;
++++cursor:+hand;
}|code-block|syntax|javascript|721389|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/cursor.html|1^0|P|C|0|0|G|C|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|R]]]]

@Curt's answer will work, but you can use a <a href="http://www.quirksmode.org/css/cursor.html" rel="nofollow">cursor style</a> in css to make it look like a link without the bother of generated a bogus link. Use hand or pointer depending on browser conformance.

Cross browser conformant pointer css (from <a href="http://www.quirksmode.org/css/cursor.html" rel="nofollow">cursor style</a> guide):

<pre><code>element {
 cursor: pointer;
 cursor: hand;
}
</code></pre>

blocks|key|721449|text|不要使用<a>...取而代之的是使用<span+class='style-like-link'>，然后使用该类随心所欲地设置样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|721450|entityMap^0|4|3|I|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

DONT USE <code>&lt;a&gt;</code>... instead use <code>&lt;span class='style-like-link'&gt;</code>
and then use the class to style it however you want.

blocks|key|505404|text|一种没有人提到的方法是将href指向一个空的本地文件位置，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505405|<a+href='\\'>my+dead+link</a>|code-block|syntax|javascript|505406|为什么？如果你使用诸如react或angular这样的框架，编译器会发出一些警告，这可能会使你的日志或控制台变脏。这项技术还将防止机器人或蜘蛛错误地链接事物。|505407|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

one way which no one has mentioned is to point the href to an empty local file location like so

<pre><code>&lt;a href='\\'&gt;my dead link&lt;/a&gt;
</code></pre>

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.

blocks|key|721591|text|我们可以使用javascript+void来实现这一点，这通常涉及到表达式的求值和返回undefined，这包括在href上添加javascript:void(0);。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|721592|void运算符通常仅用于获取未定义的原始值，通常使用“void(0)”(相当于“void+0”)。在这些情况下，可以改用全局变量undefined+(假设未将其赋给非默认值)。|721593|​|721594|a+{
++text-decoration:+initial;
}|code-block|syntax|javascript|721595|<a+href="javascript:void(0);">+This+link+actually+does+nothing+when+clicked</a>|721596|721597|entityMap^0|1S|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Y|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

We can achieve that using javascript void which normally involves evaluation of an expression and returning undefined, which includes adding <code>javascript:void(0);</code> on the 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). 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
 text-decoration: initial;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="javascript:void(0);"&gt; This link actually does nothing when clicked&lt;/a&gt;</code></pre>
</div>
</div>

blocks|key|505531|text|适当的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505532|<a+href="#;">Link</a>|code-block|syntax|javascript|505533|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Proper:
<pre><code>&lt;a href=&quot;#;&quot;&gt;Link&lt;/a&gt;
</code></pre>

blocks|key|505544|text|只需删除href属性。这没必要。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|505545|<a>+a+link+</a>|code-block|syntax|javascript|505546|entityMap^0|4|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

just remove the <code>href</code> attribute. it's not necessary.
<pre><code>&lt;a&gt; a link &lt;/a&gt;
</code></pre>

blocks|key|505584|text|如果你只使用css怎么办？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|505585|pointer-events:+none;+|code-block|syntax|javascript|505586|​|505587|span,+a+{
++++color:+black;
++++cursor:+default;
++++pointer-events:+none;++++
++++text-decoration:+none;
}|505588|Normal+text+-->+<a+href="https://google.com">Link+to+google+click+me</a>+<--+another+text|505589|505590|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

What if you use only css?
<pre><code>pointer-events: none; 
</code></pre>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>span, a {
 color: black;
 cursor: default;
 pointer-events: none; 
 text-decoration: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span&gt;Normal text --&gt; &lt;a href="https://google.com"&gt;Link to google click me&lt;/a&gt; &lt;-- another text&lt;/span&gt;</code></pre>
</div>
</div>

I want a link that does nothing. I don't want this:

<code>&lt;a href="#"&gt;</code>

because then the URL becomes <code>something.com/whatever/#</code>.

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!

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.

Make a HTML link that does nothing (literally nothing)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想要一个什么都不做的链接。我不想这样：<a href="#">因为这样URL就变成了something.com/whatever/#。我想要链接的唯一原因是用户可以看到他们可以点击文本。JavaScript被用来执行一些操作，所以我不需要链接去任何地方，但我需要它看起来像一个链接！我可以使用一些数据属性，并告诉我CS...

问创建一个不做任何事情的HTML链接(字面上什么都不做)
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个不做任何事情的HTML链接(字面上什么都不做)EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建一个不做任何事情的HTML链接(字面上什么都不做)
EN