Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Excessive Use of jQuery's preventDefault() and stopPropagation()

I was recently in a discussion with a work colleague about some differences in our coding practices, where I raised an issue about his excessive use of the two above mentioned methods in his event handlers. Specifically, they all look like this...

$('span.whatever').on('click', function(e) {

    e.preventDefault();
    e.stopPropagation();

    /* do things */

});

He has made the claim that this is a good practice with no foreseeable blowback, and will improve cross-platform support while reducing unexpected issues down the road.

My question to you guys: If he's right, why hasn't the jQuery team implemented this behavior globally applied to all event handlers? In effect, my assumption is that he's wrong simply because the methods are available for independent use, but who knows... Your insight is much appreciated.

--

Update: I did a simple speed test, and there is a little drag caused by these two function, but nothing terribly noticeable. Still, among other things, a good reason to be deliberate in their use I think.

$('span.whatever').on('click', function(e) {

    var start = new Date();

    for (i = 0; i < 999999; i++) {
        e.preventDefault();
        e.stopPropagation();
    }

    console.log( new Date() - start );

});

The above logged ~9.5 seconds as is, and ~2.5 seconds when I took the function calls out of the loop.

like image 538
65Fbef05 Avatar asked Mar 08 '13 01:03

65Fbef05


People also ask

What's the difference between event preventDefault () and event stopPropagation () methods?

The event. preventDefault() will not allow the user to leave the page and open the URL. The event. stopPropagation() method stops the propagation of an event from occurring in the bubbling or capturing phase.

Why e preventDefault () is used?

The preventDefault() method is used to prevent the browser from executing the default action of the selected element. It can prevent the user from processing the request by clicking the link. Parameters: It does not accept any parameter.

Why is event stopPropagation used?

Event.stopPropagation() The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed.

Does preventDefault stop propagation?

Event.preventDefault()The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation() , either of which terminates propagation at once.


1 Answers

I don't do the same thing as your colleague (pushing the 2 calls on EVERY event handler), but I do have the same practice of using these calls explicitely rather than a "return false;", and I believe that has made my life easier.

When I started with Jquery, I figured if I need to both stop propagation, and prevent default, I should just "return false", which I kind of did all over the place.

$('a.whatever').on('click', function(e) {

    do_stuff();

    return false;
}); 

But there was 2 problems I enventually encountered:

  • if do_stuff() has any critical error causing an exception, "return false;" will never be reached!!! The error will eventually be "nicely" swallowed by jquery; your event will bubble, and let the browser execute the default action. If you are in a single page app and a link was clicked, for all you know the page navigated away, and the entire app state went down the toilet (I've been there before).

  • I was too lenient with my return false: in many cases, I just needed a preventdefault(). "return false" was killing event bubbling and sometimes hindered my ability to perform another action higher up the dom hierarchy (or made some other plugin/libs I was using not work properly)

So I now prefer to be explicit. I litterally never use "return false;" any more. If I have an event handler that must either not propagate or not execute default, I deliberatly put that in my function FIRST, before any processing code. Whatever happens during event handling should NOT affect the fact that I do NOT want the default action to run, and/or event to not bubble.

And yes, that being said, I am also mindful of using just one of the 2 when required (or none at all in some cases). I do not just add both preventDefault() and stopPropagation() for no reason. Everywhere I manipulate an event in a handler, it is part of a conscious case-by-case decision.

like image 65
Timothée Groleau Avatar answered Nov 03 '22 00:11

Timothée Groleau