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

This is what I have basically:

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

Now, the problem is I want to keep the parent as a link but if the user clicks the span with the onclick event I don't want the browser to follow the link.

I've tried

event.stopPropagation();

but that only seems to stop the links onclick event from firing, or I'm doing something wrong.

I'm currently sort of in crunch mode and I don't want to spend too much time rewriting the code that generates this HTML, but it still can't be a hack since it's implemented in a pretty vital function of the site. Any help appr开发者_JS百科eciated.

Make the javascript method return false!

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

sure, just return false in the onclick

something like

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

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

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>