Add event listener to multiple elements excluding one

Question

I am developing a mobile application with phonegap and Zepto and I'm struggling with one issue. I have side menus on left and right, that are shown with swipe. However, in my main container, I have a little slider that works with swipe. My problem is that as soon as I finish swiping the slider container, the swipe event for side menus is called and the menu is shown. There's a way to prevent this behavior?

Code:

Zepto(document).on('swipeRight', function(){
    if($('#search-container').hasClass('back-left'))
        handleSideSearchMenu();
    else if(!$(showLeft).hasClass('active'))
        MyObj.handleSideMenu(showLeft);
}).on('swipeLeft', function(){  
    if($('#search-container').hasClass('to-right') && !$(showLeft).hasClass('active'))
        handleSideSearchMenu();
    else if($(showLeft).hasClass('active'))
        MyObj.handleSideMenu(showLeft);
});

Answer 1

You could do this...

Zepto(document).on('swipeRight', function(e) {

    if ($(e.target).is(**slider-container**)) return;

    if($('#search-container').hasClass('back-left'))
        handleSideSearchMenu();
    else if(!$(showLeft).hasClass('active'))
        MyObj.handleSideMenu(showLeft);

}).on('swipeLeft', function(e){  

    if ($(e.target).is(**slider-container**)) return;

    if($('#search-container').hasClass('to-right') && !$(showLeft).hasClass('active'))
        handleSideSearchMenu();
    else if($(showLeft).hasClass('active'))
        MyObj.handleSideMenu(showLeft);
});

In the above code, e.target is the DOM element that triggered the event, so you can use that to check for elements you want to ignore.

Without seeing the markup I can't be much more help. You'll need to replace **slider-container** with something that identifies the element you want to ignore.