How do I disable a link with javascript and css?

Question

Do you know how to disable link for user only? I have

<div class="searchoffertext" onclick="searchoffertext_selected('Banana')"><a href="./search/Banana">Banana</a></div>

So idea is that link /search/Banana is a valid link and I want to keep it for search indexing engines. However, I want when user click on link, the function searchoffertext_selected was called and nothing more happened.

• AKIWEB: You want user to see the redirected page or not? if not, why you need to keep it in an anchor tag. Use buttons instead?
• Tigran: Just for search engines. I do not know how they work with ajax data.

Answer 1

To stop the link from taking its default action add return false; to the onclick event:

<div class="searchoffertext" onclick="searchoffertext_selected('Banana'); return false;"><a href="./search/Banana">Banana</a></div>

It's probably a better idea to put the onclick directly on the <a>

But an even better approach would be to use unobtrusive JavaScript to attach an event to the link via a selector.

See also: Stackoverflow: When to use onclick in HTML?

Answer 2

Using jQuery:

$('#selector').click(function(e){
 e.preventDefault();
});

VanilaJS:

<a onclick="return false;">

• j08691: There's no need to load jQuery to do something this basic.
• rink.attendant.6: But... not enough jQuery
• Mohamad: I appreciate that, but I did give a Vanilla JS solution.
• rink.attendant.6: True, but return false !== preventDefault()

Answer 3

Try this?

js

document.querySelectorAll('.searchoffertext > a').onclick = function(e) {
 e.preventDefault();
 searchoffertext_selected(this.getAttribute("data-fruit"));
}

html

<div class="searchoffertext">
 <a href="./search/Banana" data-fruit="Banana">Banana</a>
</div>

• rink.attendant.6: There is no default action executed on a click event of a div.
• Ian: @rink.attendant.6 You understand that events bubble, right? And I'm not sure if the answer was edited, but the selector is .searchoffertext > a, so there are no div events here
• rink.attendant.6: The answer has been edited, there was no > a in there before.
• Ozzy: @Ian Yes I originally left out the > a but about the same time as rink's comment added it in
• frnhr: There is a [0] missing after the selector, i.e. ...querySelectorAll('.searchoffertext > a')[0].onclick... because, unlike with the almighty jQuery, stuff doesn't automatically apply to the entire list of elements.

Answer 4

HTML

<div class="searchoffertext" onclick="searchoffertext_selected('Banana')">
 <a href="./search/Banana">Banana</a>
</div>

CSS

Use pointer-events, but this is unsupported in versions of IE older than 11.

.searchoffertext > a {
 pointer-events: none;
}

JavaScript

Prevent the default action from executing when the link is clicked:

var links = document.querySelectorAll('.searchoffertext > a'), i;
for(i = 0; i < links.length; i += 1) {
 links[i].addEventListener('click', function(e) {
 e.preventDefault();
 }, false);
}