Hammer JS event order

Hammer-JS-event-order.markdown

Hammer JS event order

A single panLeft/panRight event is being fired before panStart. This seems like buggy behaviour

A Pen by Donovan Graham on CodePen.

License.

index.html

<div id="myElement">
  Pan me
</div>

<div id="myLog">
</div>

<div>
  <button onClick="clearLog(); return false;">Clear Log</button>
</div>

script.js

var myElement = $('#myElement');
var myLog = $('#myLog');

var mc = new Hammer(myElement[0]);

mc.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });


mc.on("panstart", function(ev) {
  myLog.append("<div>panstart</div>" );
});

mc.on("panleft", function(ev) {
  myLog.append("<div>panleft:" + ev.deltaX + "</div>");
});

mc.on("panright", function(ev) {
  myLog.append("<div>panright:" + ev.deltaX + "</div>");  
});

mc.on("panend", function(ev) {
  myLog.append("<div>panend <br><br></div>");  
});

function clearLog() {
  myLog.empty();
}

style.css

#myElement {
  width:300px;
  height: 300px;
  display: block;
  background-color: red;
  float: left;
  margin: 10px;
  text-align: center;
  vertical-align: middle;
}

#myLog {
  width: 280px;
  height: 280px;
  display: block;
  border: 1px solid #ccc;
  float: left;
  margin: 10px; 
  padding: 5px;
  color: #333;
  overflow: scroll;
}

button {
  width: 80px;
  height: 40px;
}

XJRmLX.markdown

XJRmLX

Forked from Captain Anonymous's Pen ByRoeq.

A Pen by Donovan Graham on CodePen.

License.