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 appreciated.
To prevent other events on the same element from firing, use event. stopImmediatePropagation() instead. It will stop both parents and the same element events from firing.
To stop the click event from propagating to the <div> element, you have to call the stopPropagation() method in the event handler of the button: btn. addEventListener('click', (e) => { e. stopPropagation(); alert('The button was clicked!
This is a type of JavaScript link - the onclick attribute defines a JavaScript action when the 'onclick' event for the link is triggered (i.e. when a user clicks the link) - and there is a URL present itself in the onclick attribute.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With