CODEWITHSUNDEEP
javascripthtmlcss
Serenity
Serenity

Reputation: 5098

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

Upvotes: 44

Views: 109500

Answers (12)

Phenk0
Phenk0

Reputation: 1

I ran into similar problem at react-router-dom {NavLink}. I had needed NavLink that represents Categories && triggers 'active' on child NavLinks && has defined 'href' attribute (or 'to' in my case) && be unclickable because I don't have pages there. That is my solution in my case

<NavLink to='someCategoryPath' onClick={(e) => e.preventDefault()}>
   {title}
</NavLink>

..and maybe in your case: 

document.getElementById('x').addEventListener('click',(e) => e.preventDefault())
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.google.com" id='x' >Unclickable Google Link</a>
<br>
<a href="https://www.google.com"/>Clickable Google Link</a>
</body>
</html>

P.S. Cursor can be changed in CSS.

P.S.2. I know that this question was asked 12 years, 3 months ago

Upvotes: 0

Vahid Hallaji
Vahid Hallaji

Reputation: 7467

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>

Upvotes: 59

Husam Ebish
Husam Ebish

Reputation: 6838

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>

Upvotes: 3

Awwal
Awwal

Reputation: 61

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;
}

Upvotes: 4

Muhammad Aqib Hussain
Muhammad Aqib Hussain

Reputation: 26

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>

Upvotes: 0

user2247744
user2247744

Reputation: 135

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

Upvotes: 1

Wayne Smith
Wayne Smith

Reputation: 4868

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/

Upvotes: 1

Adil
Adil

Reputation: 2112

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.

Upvotes: 5

MtnViewJohn
MtnViewJohn

Reputation: 683

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.

Upvotes: 28

Jon Skeet
Jon Skeet

Reputation: 1503449

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.

Upvotes: 5

Haim Evgi
Haim Evgi

Reputation: 125614

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

Upvotes: 7

tsurahman
tsurahman

Reputation: 1912

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

Upvotes: 17

Related Questions