How do I make a link unclickable?

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?

[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

---

The pointer-events CSS property can be set in modern browsers on a particular graphic element and tells under what circumstances the element can become the target of pointer events.

The none value makes sure that the element is never the target of pointer events and prevents all click, state and cursor options on the element.

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>

However, pointer events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, pointer events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases. - 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>

---

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.

---

<a href="abcd.html" onclick="return false;">abcd</a>

---

including an onclick="return false" attribute on the anchor element does the trick. While this solution uses javascript and not css

---

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.

Note that I believe this will make the link visibly unclickable (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 :)

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.)

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.

---

Here is the pure HTML/CSS solution :

1. remove the "href" tag, and put your anchor in the "name" attr (you probably knew this already)

2. Add the following style to your link :

   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 :

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".

Hope this helps.

---

This pretty works for me. Add a class of disable to your a tag. and this code snippet to your css

a.disable {
pointer-events: none;
cursor: default;
}

---

If you want to use 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>

---

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/

---

If the anchor element is a server side element, remove the href attribute. anchor.attributes.remove("href");

---

If you wanted to add anchor then use this html code
Use this html code before where you want to put anchor
<a id="Write Your Anchor Here" class="invisible"></a>
i.e
<a id="anchor" class="invisible"></a> How to Put Anchor
or

<div id="youranchorname" class="anchor">

https://www.example.com/2016/11/how-to-add-html-code#anchor

by using this url the visitor will directly reached to the how to put anchor part in the post Thanks

Note : This url is just used for example purpose. It is not a working URL and your div tag must be closed with </div>