jQuery stop propagation for all children of body using the on() event

Question

I have a script that is disabling the scrolling of the body element when I have a popup box showing, however I do not want to disable scrolling for the popup box, (or any other scrollbars other than the main body one), I have established what I want by selecting the element inside the popup box, however I want it to work for everything, not just that one element.

 $('html').on('mousewheel DOMMouseScroll', "body", function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});


$('div').on('mousewheel DOMMouseScroll', ".photos", function(e) {
    e.stopPropagation();

});

So what I want to do is for this second script, instead of selecting .photos directly, just selecting any child of < body>

jimp · Accepted Answer · 2012-10-03T18:15:16.193

3

Try using the > child selector and don't use a selector on the delegate node set.

$('body > *').on('mousewheel DOMMouseScroll', null, function(e) {
    e.stopPropagation();
});

If you want any descendant of body then remove the > rule.

EDIT:
The previous code used a selector, which would have invalidated the delegation. Thanks @RichardNeilIlagan for pointing that out.

EDIT 2:
If you want to scroll nothing other than the contents in the popup box, why not have your popup use a 100% W x 100% H overlay like a jQuery UI dialog does in "modal" mode? Then you could attach your no-scroll handler to the full-window overlay and stopPropagation there, couldn't you. That would work unless you require the contents behind the popup to still be accessible.

edited Oct 03 '12 at 18:15

answered Oct 03 '12 at 17:47

jimp

16,999
3
27
36

1

Ah okay, yes this is what I want. (With any descendant of body), per your edit. – Dylan Cross Oct 03 '12 at 17:50
But wouldn't this kind of defeat itself though? we're delegating the event handler to any `div` on the page, and checking for `body > *`. So essentially, the event has to trigger (1) in an element inside any `div`, but also (2) a child of `body`. At the very least, you can have `
...` so wouldn't this not trigger at all?
– Richard Neil Ilagan Oct 03 '12 at 17:53
@DylanCross Take a look again. I think Richard makes a valid point and I updated the answer to reflect that. – jimp Oct 03 '12 at 18:03
Yes I had realized that a few minutes ago myself, but also, now with the new code above, it doesn't seem to stop the scrolling at all. – Dylan Cross Oct 03 '12 at 18:07
Even with removing the > from the selector – Dylan Cross Oct 03 '12 at 18:07
Check edit #2. Maybe that approach would be easier to achieve? – jimp Oct 03 '12 at 18:15
Well yes, I have basically used that approach to do this anyways, which works fine – Dylan Cross Oct 03 '12 at 18:22

jQuery stop propagation for all children of body using the on() event

1 Answers1