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.

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

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>