Disable click without the help of jQuery/Javascript

Question

Is there anyway to inhibit the click handler on a tags in HTML without the help of jQuery/Javascript?

disabled only works on button and input, but I've chosen to use a tags in my code. I suppose I can use span and simulate the exact a styles I currently have, but it would be nice if there's a simple way around this.

Thanks in advance.

Javascript? Try onclick="return false;" ... but it's not very pretty. Do you use the "href" Tag? — Stefan Brendle, Sep 11 '13 at 09:34
Use a span instead of an anchor like you propose. If you don't want something to behave like an anchor, then don't make it an anchor. — billyonecan, Sep 11 '13 at 09:35
Try This .disabled { pointer-events: none; cursor: default; } link — Ahsan Aziz Abbasi, Apr 12 '17 at 10:11

cocco · Answer 1 · 2013-09-11T10:49:12.130

2

there are many ways to do that..

1.simplest:

a.onclick=function(){
 return false
}

2.standard/modern:

a.addEventListener('click',function(e){
 e.preventDefault()
},false)

example with class=active to activate the link.

http://jsfiddle.net/y7vVq/

edited Sep 11 '13 at 10:49

answered Sep 11 '13 at 09:35

cocco

16,442
7
62
77

I assume there's also no way to do it without Javascript also? – Anriëtte Myburgh Sep 11 '13 at 09:35
1

no.. that is not possible. – cocco Sep 11 '13 at 09:36
1

Yes it is possible using CSS – mplungjan Sep 11 '13 at 09:38
not in a proper way.. but we can never be shure... so demo on jsfiddle? – cocco Sep 11 '13 at 09:42
also putting a # inside the href is a solution (btw you need js to change that to) but that moves the page to the top if iremember correctly. or using css3 disabling the click but thats not supported on older browsers. – cocco Sep 11 '13 at 09:47
pointer-events: none; you mean that? – cocco Sep 11 '13 at 09:51

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

Use # as href or omit the href. The link won't work anymore. As cocco noted, setting href to # has the disadvantage, that the history gets messed up and the browser jumps back to the top of the page. Nevertheless, the value # has been used on numerous pages.

Disabling the onClick is not possible, but you can use onclick="return false". This way nothing happens on click.

There is also a partial solution using css (described in this already answered question).

edited May 23 '17 at 12:32

Community

1
1

answered Sep 11 '13 at 09:36

urzeit

2,863
20
36

1

hello is better than # as it also prevents from changing the hash. – cocco Sep 11 '13 at 09:49
@cocco: Which way of changing does it prevent? By javascript it's possible to set the attribute via `.setAttribute('href', 'http://something');` as well, so I see no advantage. – urzeit Sep 11 '13 at 10:20
i'm talking about the hashtag '#'. you don'teven need to set the hashtag you can set it to nothing. el.setAttribute('href', '');el.href='';link==disabled. – cocco Sep 11 '13 at 10:23
@cocco: While it is absolutely correct, that omitting the attribute does the job, I don't understand what you meant with *prevents from changing the hash*. Did you mean that it prevents you from *accidently* changing the href? – urzeit Sep 11 '13 at 10:31
nothing special... 1.i don't like the hash tag on the url if it's not needed. 2.if i remember correctly sometimes if you scrolled down it jumps up to the top on some browsers. – cocco Sep 11 '13 at 10:35
oh yeah and it messses up history.<- biggest problem – cocco Sep 11 '13 at 10:52
@cocco: Okay, I wasn't aware of the history-problem, right. – urzeit Sep 11 '13 at 11:44

score 0 · Answer 3 · answered Sep 11 '13 at 09:45

0

onclick="return false"

This is the simple way to disable click in a tag

answered Sep 11 '13 at 09:45

Love Trivedi

3,899
3
20
26

Disable click without the help of jQuery/Javascript

3 Answers3