如何使鏈接無法點擊？
[英]How do I make a link unclickable?
問題描述
是否有一些 CSS 屬性或我可以與我的錨標記一起使用的東西，以使其無法點擊，或者我必須在后面的代碼中做一些事情才能得到我想要的東西？
[編輯] onclick=return false; 正在刷新頁面.. 我不希望那樣.. 希望這個錨標簽顯示為純文本.. 實際上我在錨標簽上應用了 css.. 所以不能把它改成簡單的標簽或其他什么
11 個解決方案
解決方案1
45 2013-09-23 13:01:32
可以在現代瀏覽器中對特定圖形元素設置pointer-events CSS 屬性，並告訴元素在什么情況下可以成為指針事件的目標。
none值確保元素永遠不會成為指針事件的目標，並防止元素上的所有單擊、狀態和光標選項。
a { display: inline-block; pointer-events: none; }
<a href="http://stackoverflow.com" onclick="alert('clicked on link')"> <svg width="140" height="140" onclick="alert('clicked on svg')"> <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" /> </svg> </a>
但是，如果這些后代將指針事件設置為其他值，則指針事件可以針對其后代元素。 在這些情況下，指針事件將在事件捕獲/冒泡階段期間，在它們往返后代的途中適當地觸發此父元素上的事件偵聽器。 - MDN
a { display: inline-block; pointer-events: none; } a svg { pointer-events: fill; }
<a href="http://stackoverflow.com" onclick="alert('clicked on link')"> <svg width="140" height="140" onclick="alert('clicked on svg')"> <rect x="10" y="10" width="120" height="120" stroke="#42858C" stroke-width="10" fill="#3E4E50" /> </svg> </a>
解決方案2
25 已采納 2010-10-21 06:24:29
如果您希望錨標記是鏈接目標，而不是鏈接源，則省略 href 屬性並只有 name 屬性。 HTML 4.01 規范允許這樣做，並建議瀏覽器將無 href 錨標記中的文本顯示為普通文本。
解決方案3
15 2010-10-21 06:11:09
<a href="abcd.html" onclick="return false;">abcd</a>
解決方案4
6 2010-10-21 06:11:38
在錨元素上包含一個onclick="return false"屬性就可以了。 雖然此解決方案使用 javascript 而不是 css
解決方案5
5 2010-10-21 06:10:53
你可以使用
disabled="disabled"
在錨標簽中，我相信 - 無論如何，這就是我在 csharpindepth.com 上所做的。 誠然，我不想發誓它得到了多么廣泛的支持-您可能想檢查一下。 不過在 Chrome、IE 和 Firefox 上似乎沒問題。 我不知道 CSS 中是否有等價物。
請注意，我相信這將使鏈接明顯無法點擊（但是瀏覽器想要這樣做），而不是什么都不做。
編輯：我剛剛在本地文件上嘗試過這個，但它不起作用......而它絕對適用於 csharpindepth.com。 值得一試，但也可能值得研究其他方法:)
編輯：正如 BoltClock 所指出的，這不是嚴格有效的 HTML - 例如，這可能意味着它只能在 quirks 模式下工作。 （這可以解釋我未能在本地生產它。）
您可能最好使用 JavaScript 解決方案和 CSS 樣式來更改鏈接外觀……但我將這個答案留在這里僅作記錄。
解決方案6
4 2010-10-21 06:48:30
這是純 HTML/CSS 解決方案：
- 刪除“ href ”標簽，並將您的錨點放在“ name ”屬性中（您可能已經知道了）
將以下樣式添加到您的鏈接：
a{ text-decoration: none; cursor: default; }
您應該使用命名屬性來定位錨點樣式，這樣您的所有鏈接都不會變得“不可點擊”，如下所示：
a[name=*]{ text-decoration: none; cursor: default; }
命名屬性在 IE 6 中不起作用（也可能不在 7 中）。 一個完全跨瀏覽器的解決方案是向錨點添加一個類，並以此為目標。 例如：
a.anchor{ text-decoration: none; cursor: default; }
注意：上述樣式使鏈接“出現”不可點擊。 如果 a 標簽之一有一個 href，你仍然可以點擊它，它會“去某個地方”或“做某事”。
希望這會有所幫助。
解決方案7
4 2017-12-18 10:48:50
這對我來說很有效。 向您的 a 標簽添加一類禁用。 並將此代碼片段添加到您的 css
a.disable {
pointer-events: none;
cursor: default;
}
解決方案8
3 2018-06-26 14:30:53
如果你想使用 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>
解決方案9
1 2014-06-20 13:55:03
如果錨元素是服務器端元素，請刪除 href 屬性。 anchor.attributes.remove("href");
解決方案10
1 2010-10-21 21:08:26
在錨標記之前放置一個塊 style="position:absolute" 並調整其大小以覆蓋內容。 不知道為什么你想讓它不可點擊大多數人想知道如何使分層 html 中的鏈接可點擊http://wsmithdesign.wordpress.com/2010/10/20/layering-html-with-absolute-positions-in -流體-html/
解決方案11
0 2016-12-18 14:39:25
如果您想添加錨點，請使用此 html 代碼
在要放置錨的位置之前使用此 html 代碼<a id="Write Your Anchor Here" class="invisible"></a>
即<a id="anchor" class="invisible"></a> How to Put Anchor
或
<div id="youranchorname" class="anchor">
https://www.example.com/2016/11/how-to-add-html-code#anchor
通過使用此網址，訪問者將直接到達如何在帖子中放置錨點部分謝謝
注意：此 url 僅用於示例目的。 它不是一個有效的 URL，你的 div 標簽必須用
</div>關閉
我想讓一個鏈接在前 10 秒內不可點擊，然后讓它可點擊
[英]I want to make a link unclickable for the first 10 seconds and then make it clickable
除非正確填寫信息，否則如何使提交按鈕不可點擊？
[英]How do I make a submit button unclickable unless the information is filled out correctly?
如何使復選框不可點擊*而不*它在瀏覽器中變灰？
[英]How do I make a checkbox unclickable *without* it being greyed out in the browser?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.