CODEWITHSUNDEEP
javascripthtmlcss
Tigran
Tigran

Reputation: 1057

How do I disable a link with javascript and css?

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.

Upvotes: 6

Views: 12641

Answers (4)

AJ W
AJ W

Reputation: 140

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?

Upvotes: 9

Ozzy
Ozzy

Reputation: 8322

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>

Upvotes: 1

rink.attendant.6
rink.attendant.6

Reputation: 46297

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

Upvotes: -2

Mohamad
Mohamad

Reputation: 35359

Using jQuery:

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

VanilaJS:

<a onclick="return false;">

Upvotes: 3

Related Questions