最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Detect swipe from edge in jQuery Mobile - Stack Overflow

programmeradmin4浏览0评论

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.

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.

Share Improve this question asked Nov 20, 2013 at 23:40 HP.HP. 19.9k56 gold badges159 silver badges258 bronze badges 1
  • Similar: stackoverflow./questions/24163202/… – trante Commented Jun 12, 2014 at 8:14
Add a ment  | 

3 Answers 3

Reset to default 4

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]

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

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
   }
});
发布评论

评论列表(0)

  1. 暂无评论