CODEWITHSUNDEEP
hammer.js
JoshuaDavid
JoshuaDavid

Reputation: 9519

Hammer.js - Panstart event firing more than once

Why is my panstart event firing just as often as pan? Isn't panstart supposed to fire just once per gesture?

var myElement = document.getElementById('myElement');
var myResult = document.getElementById('myResult');

// create a simple instance
var mc = new Hammer(myElement);

// setup pan gesture support
mc.get('pan').set({ event: 'panstart', direction: Hammer.DIRECTION_ALL });

// listen to events...
var timesFired = 0;
mc.on("panstart", function(ev) {
  timesFired++;
  myElement.textContent = ev.type;
    myResult.textContent = '# events fired: ' + timesFired;
});
#myElement {
  background: silver;
  height: 100px;
  text-align: center;
  font: 50px/100px Helvetica, Arial, sans-serif;
}

#myResult {
  text-align: center;
  font: 50px/70px Helvetica, Arial, sans-serif;
}
<script src="https://hammerjs.github.io/dist/hammer.js"></script>

<div id="myElement">(pan here)</div>
<div id="myResult"></div>

Upvotes: 2

Views: 1820

Answers (1)

Mainak Biswas
Mainak Biswas

Reputation: 51

When you write this

mc.get('pan').set({ event: 'panstart', direction: Hammer.DIRECTION_ALL });

you are saying that an event named panstart should be fired when pan is detected. That why you get so many panstarts.

modification:

mc.get('pan').set({ **enable: true**, direction: Hammer.DIRECTION_ALL });

// listen to events...
var timesFired = 0;
mc.on("panstart pan", function(ev) {
  timesFired++;
  myElement.textContent = ev.type;
    myResult.textContent = '# events fired: ' + timesFired;
});

Upvotes: 5

Related Questions