I am running into issues with getting Hammer.js (with the jQuery plugin) to function properly when using swiperight. Therefore, I need to use panright.

When panning to the right, my event fires many, many times.

How can this be updated so it only runs once? (then again when the user swipes to the right or left on another slide)

$('.slide').hammer().on('panright', doSomething);

I am running into issues with getting Hammer.js (with the jQuery plugin) to function properly when using swiperight. Therefore, I need to use panright.

When panning to the right, my event fires many, many times.

How can this be updated so it only runs once? (then again when the user swipes to the right or left on another slide)

$('.slide').hammer().on('panright', doSomething);

• javascript
• jquery
• ios
• dom-events
• hammer.js

• FWIW, I found I was getting multiple Hammer events firing because I'd inadvertently installed multiple handlers for the same event. Worth checking that your control flow's not doing the same. – Velojet Commented Jan 18, 2019 at 22:45

3 Answers 3

I think you should capture a panend event. For example:

var myElement = document.getElementById('myID');
var mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan({direction:Hammer.DIRECTION_HORIZONTAL, threshold:80, pointers: 0}));
mc.on("panend", function(ev) {
  if(ev.direction == Hammer.DIRECTION_RIGHT) 
  {
    //do what you want here
  }
});

You can filter the event by isFinal property:

var mc = new Hammer($('.screen'));
mc.on("swipeleft", moveHandler);
mc.on("swiperight", moveHandler);

function moveHandler(event){
  if(event.isFinal){
  // do something on the last animation frame
  }
}

There are other events called 'swipeleft' and 'swiperight'. This will respond to 1 swipe event instead of pan's multiple fired events.

var mc = new Hammer($('.screen'));
mc.on("swipeleft", moveHandler);
mc.on("swiperight", moveHandler);

function moveHandler(event){
    // do something
}

Documentation