Javascript 如何使链接无法点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3984726/
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
How do I make a link unclickable?
提问by Serenity
Is there some CSS property or something that I can use with my anchor tag so as to make it unclickable or I HAVE to do stuff in code behind to get what I want?
是否有一些 CSS 属性或我可以与我的锚标记一起使用的东西，以使其无法点击，或者我必须在后面的代码中做一些事情才能得到我想要的东西？
[edit]onclick=return false;is refreshing the page.. I dont want that.. want this anchor tag to appear as a plain text.. actually I have css applied on anchor tag.. so cant change it to simple lable or whatever
[编辑]onclick=return false;正在刷新页面.. 我不希望那样.. 希望这个锚标记显示为纯文本.. 实际上我在锚标记上应用了 css.. 所以不能将其更改为简单标签或其他任何内容
采纳答案by MtnViewJohn
If you want the anchor tag to be a link destination, but not a link source then omit the href attribute and only have a name attribute. The HTML 4.01 spec allows this and suggests that browsers display the text within the href-less anchor tag as normal text.
如果您希望锚标记是链接目标，而不是链接源，则省略 href 属性并只有 name 属性。HTML 4.01 规范允许这样做，并建议浏览器将无 href 锚标记中的文本显示为普通文本。
回答by Vahid Hallaji
Just an update that in modern browsers you can do:
只是在现代浏览器中您可以执行的更新：
a.disable {
pointer-events: none;
cursor: default;
}<a href="http://stackoverflow.com" class="disable">SO</a>回答by tsurahman
<a href="abcd.html" onclick="return false;">abcd</a>
回答by Haim Evgi
including an onclick="return false"attribute on the
anchor element does the trick. While this solution uses javascript and
not css
onclick="return false"在锚元素上包含一个属性就可以了。虽然此解决方案使用 javascript 而不是 css
回答by Jon Skeet
You can use
您可以使用
disabled="disabled"
in the anchor tag, I believe - that's what I do on csharpindepth.com, anyway. I wouldn't like to swear to how widely supported it is, admittedly - you probably want to check that. Seems okay on Chrome, IE and Firefox though. I don't know if there's an equivalent just in CSS.
在锚标签中，我相信 - 无论如何，这就是我在 csharpindepth.com 上所做的。诚然，我不想发誓它得到了多么广泛的支持-您可能想检查一下。不过在 Chrome、IE 和 Firefox 上似乎没问题。我不知道 CSS 中是否有等价物。
Note that I believe this will make the link visiblyunclickable (however the browser wants to do that) rather than just not do anything.
请注意，我相信这将使链接明显无法点击（但是浏览器想要这样做），而不是什么都不做。
EDIT: I've just tried this on a local file, and it doesn't work... whereas it definitely works on csharpindepth.com. Worth trying then, but also probably worth looking at other approaches :)
编辑：我刚刚在本地文件上尝试过这个，但它不起作用......而它绝对适用于 csharpindepth.com。值得一试，但也可能值得研究其他方法:)
EDIT: As BoltClock notes, this isn't strictly valid HTML - which may mean it will only work in quirks mode, for example. (That could explain my failure to produce it locally.)
编辑：正如 BoltClock 所指出的，这不是严格有效的 HTML - 例如，这可能意味着它只能在 quirks 模式下工作。（这可以解释我未能在本地生产它。）
You're probably better off with a JavaScript solution along with a CSS style to change the link appearance... but I'll leave this answer here just for the record.
您可能最好使用 JavaScript 解决方案和 CSS 样式来更改链接外观……但我将这个答案留在这里仅供记录。
回答by Adil
Here is the pure HTML/CSS solution :
这是纯 HTML/CSS 解决方案：
- remove the "href" tag, and put your anchor in the "name" attr (you probably knew this already)
Add the following style to your link :
a{ text-decoration: none; cursor: default; }
- 删除“ href”标签，并将您的锚点放在“ name”属性中（您可能已经知道了）
将以下样式添加到您的链接：
a{ text-decoration: none; cursor: default; }
You should target the anchor styles using named attributes, so all your links dont become "unclickable", like so :
您应该使用命名属性来定位锚点样式，这样您的所有链接都不会变得“不可点击”，如下所示：
a[name=*]{ text-decoration: none; cursor: default; }
Named attrs wont work in IE 6 (probably not in 7 either). A completely cross browser solution is to add a class to the anchors, and target that. Ex :
命名属性在 IE 6 中不起作用（也可能不在 7 中）。一个完全跨浏览器的解决方案是向锚点添加一个类，并以此为目标。前任 ：
a.anchor{ text-decoration: none; cursor: default; }
Note: The above styling makes the links "appear" unclickable. If one of the a tags had an href you could still click it and it would "go somewhere" or "do something".
注意：上述样式使链接“出现”不可点击。如果 a 标签之一有一个 href，你仍然可以点击它，它会“去某个地方”或“做某事”。
Hope this helps.
希望这可以帮助。
回答by Awwal
This pretty works for me. Add a class of disable to your a tag. and this code snippet to your css
这对我来说很有效。向您的 a 标签添加一类禁用。并将此代码片段添加到您的 css
a.disable {
pointer-events: none;
cursor: default;
}
回答by Husam Ebish
If you want to use CSS :
如果你想使用 CSS ：
.x{
pointer-events: none;
}<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com" class="x" />Unclickable Google Link</a>
<br>
<a href="https://www.google.com" class="" />Clickable Google Link</a>
</body>
</html>回答by Wayne
Place a block style="position:absolute" right before the anchor tag and size it to overlay the content. Not sure why you want to make it unclickable most people are wondering how to make the links in a layered html clickable http://wsmithdesign.wordpress.com/2010/10/20/layering-html-with-absolute-positions-in-fluid-html/
在锚标记之前放置一个块 style="position:absolute" 并调整其大小以覆盖内容。不知道为什么你想让它不可点击大多数人想知道如何使分层 html 中的链接可点击http://wsmithdesign.wordpress.com/2010/10/20/layering-html-with-absolute-positions-in -流体-html/
回答by user2247744
If the anchor element is a server side element, remove the href attribute. anchor.attributes.remove("href");
如果锚元素是服务器端元素，请删除 href 属性。anchor.attributes.remove("href");
