Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 856
Serenity Avatar asked Oct 21 '10 06:10

Serenity


People also ask

Why is my link Unclickable?

If your links seem to be unclickable when you test your messages, here are some things to look out for: In a plain text message, you want to make sure that you are including the full URL of the page that you want to link to, http:// and all. For example: example.com - Will not be clickable.

How do I lock a link in HTML?

To disable links do this: $("td > a"). attr("disabled", "disabled");


1 Answers

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>
like image 120
Vahid Hallaji Avatar answered Sep 20 '22 23:09

Vahid Hallaji