Search code examples
javascripthammer.jsgestures

Hammer.js panstart with custom pan gesture


I have requirement for pan with one pointer and more than one pointers. One pointer to draw on map and more than one to drag the map. After creating the custom pan gestures I am not able to trigger the native pan events like panstart or panend. How could I get native events triggered separately for both custom gestures.

Here is my code HTML:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en'>
<head>
 <meta  content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
</head>
  <body>
      <div id="log" style="position:absolute;top:10px;left:10px;"> Hi</div>
      <div id="mymap" style="width: 300px;height:400px;border:1px solid #c0c0c0; background-color:blue">
      </div>  
        <script type="text/javascript" src="./js/build.js"></script>
  </body>
</html>

Here is my JavaScript code:

var Hammer = require('hammerjs');
var map = document.getElementById('mymap');
var mc = new Hammer.Manager(map);

var pan1p = new Hammer.Pan({
  event: 'pan1p',
  direction: Hammer.DIRECTION_ALL,
  pointers: 1,
  preventDefault: true});
var pan2p = new Hammer.Pan({
  event: 'pan2p',
  direction: Hammer.DIRECTION_ALL,
  pointers: 2,
  preventDefault: true});
pan2p.recognizeWith(pan1p);
pan1p.requireFailure(pan2p);
mc.add([pan1p, pan2p]);
mc.on('pan1p', function(ev) {
  var log = document.getElementById('log');
  log.innerHTML = 'pan1p: ' + JSON.stringify(ev);
}); 
mc.on('pan2p', function(ev) {
  var log = document.getElementById('log');
  log.innerHTML = 'pan2p: ' + JSON.stringify(ev);
}); 
mc.on('panstart', function(ev) {
  var log = document.getElementById('log');
  log.innerHTML =  'panstart: '+JSON.stringify(ev);
}); 

Solution

  • It has to be pan1pstart as original event pan has been named as pan1p

    mc.on('panstart', function(ev) {
      var log = document.getElementById('log');
      log.innerHTML =  'panstart: '+JSON.stringify(ev);
    }); 
    

    got clarification from hammer.js repository