How can I disable HREF if onclick is executed?

Question

I have an anchor with both HREF and ONCLICK attributes set. If clicked and Javascript is enabled, I want it to only execute ONCLICK and ignore HREF. Likewise, if Javascript is disabled or unsupported, I want it to follow the HREF URL and ignore ONCLICK. Below is an example of what I'm doing, which would execute the JS and follow the link concurrently (usually the JS is executed and then the page changes):

<A HREF="http://example.com/no-js-login" ONCLICK="yes_js_login()">Log in</A>

what's the best way to do this?

I'm hoping for a Javascript answer, but I'll accept any method as long as it works, especially if this can be done with PHP. I've read "a href link executes and redirects page before javascript onclick function is able to finish" already, but it only delays HREF, but doesn't completely disable it. I'm also looking for something much simpler.

Solution 1

You can use the first un-edited solution, if you put return first in the onclick attribute:

<a href="https://example.com/no-js-login" onclick="return yes_js_login();">Log in</a>

yes_js_login = function() {
     // Your code here
     return false;
}

Example: https://jsfiddle.net/FXkgV/289/

Solution 2

    yes_js_login = function() {
         // Your code here
         return false;
    }

If you return false it should prevent the default action (going to the href).

Edit: Sorry that doesn't seem to work, you can do the following instead:

<a href="http://example.com/no-js-login" onclick="yes_js_login(); return false;">Link</a>

Solution 3

Simply disable default browser behaviour using preventDefault and pass the event within your HTML.

<a href=/foo onclick= yes_js_login(event)>Lorem ipsum</a>

yes_js_login = function(e) {
  e.preventDefault();
}

Solution 4

<a href="http://www.google.com" class="ignore-click">Test</a>

with jQuery:

<script>
    $(".ignore-click").click(function(){
        return false;
    })
</script>

with JavaScript

<script>
        for (var i = 0; i < document.getElementsByClassName("ignore-click").length; i++) {
            document.getElementsByClassName("ignore-click")[i].addEventListener('click', function (event) {
                event.preventDefault();
                return false;
            });
        }
</script>

You assign class .ignore-click to as many elements you like and clicks on those elements will be ignored

Solution 5

You can use this simple code:

<a href="" onclick="return false;">add new action</a><br>

View more solutions

Comments

[ewein]

I would use to anchors one with an href and one without. On page load check if javascript is enabled, if it is show the correct anchor else show the other.

[Ky -]

@ewein Why? That sounds like an awful lot of markup for a simple feature.

[Itai Bar-Haim]

The edited answer does not answer the question, as it removes the actual link.

[Uwe Kleine-König]

alternatively use onclick="return yes_js_login();" with yes_js_login returning false

[Ky -]

why are there two? Why are you putting JS in the HREF?

[Bo Johanson]

Supuhstar, The actual code is dynamic, javascript, and will generate an <a> element for several hundred items that are defined externally. Each item will either specify a static link address, and thats where the generated <a> element should use the regular "href behaviour". Or, a javascript function call is specified for the item, in which case the <a> element's behaviour is calculated, based on the element's context. And in the code for the <a> generator, I just wanted to copy whatever is specified for each element, no testing whether it's a link address or a javascript funtion call.

[Ky -]

I don't understand how this answers my question. Who said I wanted several hundred links? I really don't understand the point of all this, or even half of what you just said.

[Milan Simek]

That doesn't work for me. I have to use e.preventDefault()

[Gabe Rogan]

@cgogolin see my answer.

[didxga]

for anyone who still stuck, may adding this line event.stopImmediatePropagation()

[Ky -]

Over the past couple years I've changed my mind; this is a better solution

[Matthew Mathieson]

This is a great solution! I used it for buttons that I have that when clicked a pseudo class .btn-loading is added to the clicked link, then if successful a checkmark(on error an X) replaces the loading animation. I don't want the button to be able to be clicked again in some instances(for both success and error), using this I can simply $(elemnent).addClass('disabled') and easily achieve the functionality I was looking in an elegant way!

[Paras Sachapara]

return false did not work in polymer... above solution did work... Thanks

[DrunkDevKek]

How wholesome !

[Coder]

But this is not working with JSX react. Will this work?

[Mark Lozano]

this saved a lot of time.

[Ky -]

Thank you for chipping in. This doesn't help the scenario that I posed in my original question: "If clicked and Javascript is enabled, I want it to only execute ONCLICK and ignore HREF. Likewise, if Javascript is disabled or unsupported, I want it to follow the HREF URL and ignore ONCLICK."

[Duc Manh Nguyen]

I don't know why my code does not work? var modal_button = document.querySelectorAll('[href="#bookingform"]'); if(modal_button.length){ for (var i = 0; i < modal_button.length; i++) { modal_button[i].addEventListener('click',function(e){ // some code e.preventDefault(); return false; }); } }