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:

<a href="http://somelink.com"&gt;
    <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 appreciated.

Answer 1

sure, just return false in the onclick

something like

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

Answer 2

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

Answer 3

Make the javascript method return false!

You can also you event.preventDefault() if your using jQuery