Skip to main content

Stop jQuery Event Functions

By Sam Deering

JavaScript

Share:

😳 Ever felt a little embarassed sharing your JavaScript? Let's fix it.

A simple way of how to stop a jQuery or JavaScript function in it’s tracks is to use the return false line. In most cases this is not the best way and there are other functions which should be used.

Also see: stop jQuery Event Functions

Return False Example

Simple use the return false line to stop the function and return control to the calling function or page element. This jQuery function toggles the hiding and displaying of #htmlelement and then prevent browser from visiting the href element of the clicked hyperlink

$("a.toggle").click(function () {
    $("#htmlelement").toggle(); // hide/show toggle
    return false; // Prevent browser from visiting the href
});

Other variations to consider:

  • return false;
  • preventDefault()
  • stopPropagation()
  • stopImmediatePropagation()

Which method should you use?

return false;

Use only when the other options are not applicable or when your unsure or desperate.

preventDefault()

Use when you need to cancel the default behavior of say a hyperlink, keyboard shortcut or event etc… It also requires you allow for the event parameter to be accessed in your callback (In this example, I use e):

$("a").click(function (e) {
    // e == our event data
    e.preventDefault();
});

stopPropagation()

This can be used if you have an exception to the rule you specified for an container element with child elements. For example say you have disable hyperlinks on you web page except links in a particular area.

$("a").click(function () {
   // Do nothing
});

$("#dohyperlinksdiv a").click(function (e) {
    // Don't cancel the browser's default action
    // and don't bubble this event!
    e.stopPropagation();
});


stopImmediatePropagation()

Nice function to stop all future bound events. The events will fire in the order they were bound and when it hits the stopImmediatePropagation() function all further bound events are no fired.

$("div a").click(function () {
   // Do something
});

$("div a").click(function (e) {
   // Do something else
   e.stopImmediatePropagation();
});

$("div a").click(function () {
   // THIS NEVER FIRES
});

$("div").click(function () {
   // THIS NEVER FIRES
});

Conclusion

Don’t use return false unless you really have to as it provides poor cancellation and remember to prevent the default actions of elements before you exit the function. Let’s keep our coding nice and neat!

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

💁‍♀️ Fun Fact: Python was ranked #2 on a recent highest paid coders list. *


🤓 Ok. When did a code editor from Microsoft become kinda cool!?