Detect swipe from edge in jQuery Mobile

Question

I want to detect if users swipe from the edge or not before I open the panel with $("#panel").panel("open");. Here is the code

$("#main").on("swiperight",function(event){
var data = event.originalEvent.touches ? event.originalEvent.touches[0] : event,
    coords = [data.pageX, data.pageY];

console.log(coords);
});

However the coords didn't return anything because I got error:

Uncaught TypeError: Cannot read property 'touches' of undefined

1. So is there a way to get coordinate when swipe happens?

2. Or is there an easy way to detect if the staring position is from the left edge instead?

Thanks.

Answer 1

Try below in jqm 1.4+, worked for me, adjust the edge trim value accordingly, 50 was good for me

$( "div.ui-page" ).on( "swiperight", function( e ) {
    if ( e.swipestart.coords[0] <50) {
    // your logic 
    }
});

this is for x coordinate similarly you can get y from coords[1]

Answer 2

this will work for any screen size:

$("#main").on("swiperight",function( event ){
   // take 15% of screen good for diffrent screen size
   var window_width_15p = $( window ).width() * 0.15;
   // check if the swipe right is from 15% of screen (coords[0] means X)
   if ( event.swipestart.coords[0] < window_width_15p) {
      // open your panel
      $("#panel").panel("open");
   }
});

Answer 3

You can do something like this.

$('#main').on('touchstart', function(e) {
   var xPos = e.originalEvent.touches[0].pageX;
   if(xPos == 0) { //Keep in mind the margin of failure from 0, when user touches.
      //Handle edge swipe
   }
});