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);
});
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.