Swipe right to toggle class but only if not swiping over specific classes

Swipe right to toggle class but only if not swiping over specific classes

On my site I toggle classes to show the mobile navigation. Next to the button I offer the possibility swipe right to open the navigation and swipe left to close it again, but i have trouble with my tables.

For big/long tables I am using overflow: auto which makes those tables scroll able(right & left if the content doesnt fit).
Now if I like to scroll them, the navigation gets open. 

I tried something like that:
jQuery:

  1. $( 'body' ).on('swiperight', 'body:not(.outertable)', function(){
  2.     if($('.nav-toggle').hasClass('is-active')) {
  3.     }else{
  4.         navToggle.addClass('is-active');
  5.         bodymain.addClass('main-nav');
  6.         navContainer.addClass('is-visible');
  7.         html.addClass('nav-open');

  9.         }
  10. });
  11. $( 'body' ).on('swipeleft', function(){
  12.     if($('.nav-toggle').hasClass('is-active')) {
  13.         navToggle.removeClass('is-active');
  14.         bodymain.removeClass('main-nav');
  15.         navContainer.removeClass('is-visible');
  16.         html.removeClass('nav-open');
  17.     }
  18. });

But it's not working.
.outertable is the affected table with overflow:auto.

I know there is a working possibility like that:
  1.   $( 'body' ).on('swipeleft swiperight', '.outertable', function(event) {
  2.    event.stopPropagation();
  3.    event.preventDefault();
  4.   });

But this way im getting a lot of errors and performance issues.
([Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.) 100 of times on a single swipe.

I like to toggle the classes ONLY if i don't swipe right over affected classes.