Stop propagation of click event on href

Question

How can I stop the propagation of the click event so that the browser will NOT redirect?

<a id="theHref" href="http://stackoverflow.com/">SO</a>
<script>
    document.getElementById("theHref").addEventListener("mousedown", function(event) {
        console.log("href clicked, lets try to stop event propagation");
        event.stopPropagation();
        event.preventDefault();
        return false;
    });
</script>

Mages

Answer 1

Firstly, you want to listen on the "click" event, not mousedown

document.getElementById("theHref").addEventListener("click", function(event) {
    console.log("href clicked, lets try to stop event propagation");
    event.preventDefault();
    return false;
});

not sure you need the return false - I can never remember cross browser nuances like that :p return false does NOT stop Firefox, for instance

Dallis

thanks for the answer, but it doesn't work (tried in FF and in Chrome). I've updated my question with your recommendation – Mages

You're still listening to "mousedown", rather than "click" – Dallis

You are right. Listening to "click" solves my problem. Thanks. – Mages

Answer 2

Just try by using return false that is the simple method which will not make you redirect

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

Just refer this fiddle Fiddle

Wirephoto

jQuery return false in event handlers is the same as event.stopPropagation and event.preventDefault – Mages

Answer 3

This should work:

document.getElementById("theHref").addEventListener("click", function(event) {
    console.log("href clicked, lets try to stop event propagation");
    event.preventDefault();
});

Dredge

Answer 4

Try this.

<a href="https://www.google.com/" onclick="event.stopPropagation()">Click Here</a>

there is a default event object available on elements. You can access it to disable/stop the event propagation.

Bandurria