Is it possible to stop the browser from following the link when the onclick of the child element fires?

Question

This is what I have basically:

    stuff
    more          


        

Answer 1

To cancel a click on a link, the best practice is to do these two things in your link handler...

1. Use event.preventDefault().
2. Return false

Explanation

Both of these should be, by themselves, sufficient, but both are documented and well-used. Using both guarantees ideal cross-browser compatibility. To quote the MDN Developer Documentation on event.returnVal...

The Event property returnValue indicates whether the default action for this event has been prevented or not. It is set to true by default, allowing the default action to occur. Setting this property to false prevents the default action. (Source: MDN Web Docs: Event.returnValue.)

And the documentation on event.preventDefault...

The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. (Source: MDN Web Docs: Event.preventDefault().)

I was mostly inspired to answer because no other answers had working demos, so here you are! (in JavaScript and jQuery)

JavaScript

document.getElementById('move-button').onclick = function(e) {
    if(confirm('Are you sure you want to goto the bottom of page?')) {
    console.log("Click allowed!");
        return true;
    }
    console.log("Click cancelled!");
    e.preventDefault();
    return false;
};

<a id="move-button" href="#bottom">Goto Bottom of Page</a>

<br><br><br><br><br><br>page.1
<br><br><br><br><br><br>page.2
<br><br><br><br><br><br>page.3
<br><br><br><br><br><br>page.4
<br><br><br><br><br><br>page.5
<br><br><br><br><br><br>page.6
<br><br><br><br><br><br>page.7
<br><br><br><br><br><br>page.8
<br><br><br><br><br><br>

Bottom of Site<a name="bottom"></a><br><br>

jQuery

$('#move-button').on('click', function(e) {
    if(confirm('Are you sure you want to goto the bottom of page?')) {
    console.log("Click allowed!");
        return true;
    }
    console.log("Click cancelled!");
    e.preventDefault();
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="move-button" href="#bottom">Goto Bottom of Page</a>

<br><br><br><br><br><br>page.1
<br><br><br><br><br><br>page.2
<br><br><br><br><br><br>page.3
<br><br><br><br><br><br>page.4
<br><br><br><br><br><br>page.5
<br><br><br><br><br><br>page.6
<br><br><br><br><br><br>page.7
<br><br><br><br><br><br>page.8
<br><br><br><br><br><br>

Bottom of Site<a name="bottom"></a><br><br>

Answer 2

Make the javascript method return false!

Or you can also use event.preventDefault() instead of event.stopPropagation()

Answer 3

sure, just return false in the onclick

something like

<a href="somwhere" onclick="return false;">nothing happens</a>

Answer 4

<a href="http://somelink.com">
    <span>stuff</span>
    <span onclick="AwsomeFunction(); return false;">more stuff</span>
    <span>the last stuff</span>
</a>