Slidebars close when clicking canvas - mobile issue

[flourCityDesign]

I have slidebars installed in my Wordpress theme and it works fine. However I want users to be able to click anywhere outside of the Slidebars to close them, instead of having to click the link/button again to close.

I found this thread where Adam explained how to add a '.js-close-any' class to the canvas to achieve this:

// Controller
var controller = new slidebars();
controller.init();

// Close any
$( document ).on( 'click', '.js-close-any', function ( event ) {
  if ( controller.getActiveSlidebar() ) {
    event.preventDefault();
    event.stopPropagation();
    controller.close();
  }
} );

// Add close class to canvas container when Slidebar is opened
$( controller.events ).on( 'opening', function ( event ) {
  $( '[canvas]' ).addClass( 'js-close-any' );
} );

// Add close class to canvas container when Slidebar is opened
$( controller.events ).on( 'closing', function ( event ) {
  $( '[canvas]' ).removeClass( 'js-close-any' );
} );

This works fine in the browser (Chrome and Safari) but does not work on my mobile device (iPhone). This is obviously where I really want the functionality. Does anyone have a solution?

Thanks

[amichel86]

Have you found a solution for this?

[ghost]

@amichel86 Try to use touchstart instead of click for iOS devices.

// Close any
var clickEvent;

if ( navigator.userAgent.match( /(iPhone|iPad)/i ) ) {
  clickEvent = 'touchstart';
} else {
  clickEvent = 'click';
}

$( document ).on( clickEvent, '.js-close-any', function ( event ) {
  if ( controller.getActiveSlidebar() ) {
    event.preventDefault();
    event.stopPropagation();
    controller.close();
  }
} );