Hopefully this is a non-techy explanation of return false, preventDefault, and stopPropagation for Web Designers who are uncomfortable around jQuery.

event.preventDefault();

When in use you are telling the browser to avoid doing anything standard or expected.

When to use...

What it looks like…

When not to use…

  • It's not needed when making a <div>,<span>, or <p> clickable.
  • Don’t use it unless it’s necessary—it might confuse the next web designer who takes over the project.
  • event.cancelable can be used to check if the event is cancelable or not. If it comes back 'false' you won't need it. If it comes back 'true' then you might need it.

event.stopPropagation();

If you click on a child element it stops parent elements from knowing about a given event.

When to use...

  • When adding a click event to buttons inside a modal box—and the modal is inside a semi-transparent overlay—that happens to be clickable so the user can close the modal.

What it looks like...

When not to use...

  • Same as before, don’t use unless necessary. It’s rare that you will have a clickable button inside another clickable item. For a visual (in Photoshop), imagine having a delete button layered on top of a save button—it doesn't make sense. Though, a modal on top of an overlay is one of those rare exceptions.

return false;

Returning false is equivalent to calling both e.preventDefault and e.stopPropagation at the same time.

When to use...

  • Not sure.

What it looks like...

When not to use...

  • It's best not to use it until you're comfortable with preventDefault and stopPropagation.

Do you have other tips (or corrections) that web designers would find helpful? If so, share them in the comments below.


705 0 3