Stop swipe from bubbling to body

Question

I have an image carousel and an image gallery lightbox, both of which allow users to swipe through photos. However, there is also a swipe event on the entire body of the page, to open a side panel.

I've tried using the below code on the child gallery elements, but the swipe events are still bubbling to the body of the page and opening the panel.

If anyone knows what I am doing wrong, any advice is much appreciated!

$('.lightbox, .carousel').bind('swipeLeft swipeRight', function(event) {
    event.stopPropagation();
    event.preventDefault();
    event.stopImmediatePropagation();
});

Here's the fiddle.

Answer 1

JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. The while keyword, for example, must be typed "while", not "While" or "WHILE". Similarly, online, Online, OnLine, and ONLINE are four distinct variable names.

Source

You need to use swipeleft and swiperight (note not capital L or R). You have the correct capitalisation in your menu opening binding however.

$('.carousel').bind('swipeleft swiperight', function(event) {
    event.stopPropagation();
});

JSFIDDLE