Difference Between Returning False, stopPropagation, and preventDefault in jQuery

Feature thumb jquery logo

If you've spent a significant amount of time looking at jQuery code you've probably run across the following lines of code/function calls:

event.stopPropagation() event.preventDefault() return false

I've include a link to a CSS trick guide that does a great job of explaining, in detail, the core differences between the three, and I'll summarize them below.

event.stopPropagation()

The stopPropagation function stops JavaScript from bubbling up to parent elements. For example, if you want to listen for a click on a link on a tab, the default behavior will be for the on click function to run its code for the link, and then it will bubble up and run any code on parent elements, such as the tab div that it's nested inside. This can lead to odd behavior, such as code getting run multiple times for a single click. The stopPropagation function tells jQuery to stop bubbling up the click, so the parent elements will not listen for the same event.

event.preventDefault()

The default behavior for a link is to navigate the user to the page or section of the page that the link points to. However there are many times in jQuery that you want a link click to perform some other action, such as liking a post, submitting a comment, etc. The preventDefault() function simply stops the default HTML behavior from occurring, so the link click won't take the user anywhere, it will simply run the jQuery code from within the function.

Return False

When you return false, jQuery automatically runs both the stopPropagation() and preventDefault() functions.