Hammer.js 使用自定义平移手势的 panstart

Question

我有一个指针和多个指针的平移需求。一个指针用于在地图上绘制，多个指针用于拖动地图。创建自定义平移手势后，我无法触发 panstart 或 panend 等本机平移事件。我怎样才能让两个自定义手势分别触发本机事件。

这是我的代码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>

这是我的 JavaScript 代码：

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

Answer 1

必须是 pan1pstart，因为原始事件 pan 已被命名为 pan1p

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

得到了hammer.js repository

的澄清

Hammer.js 使用自定义平移手势的 panstart

Hammer.js panstart with custom pan gesture

javascript

hammer.js

gestures