Hammer.js panstart，带有自定义平移手势

Hammer.js panstart with custom pan gesture

本文关键字：自定义 js panstart Hammer      更新时间：2023-09-26

我需要一个指针和多个指针的平移。一个指针在地图上绘制，多个指针拖动地图。创建自定义平移手势后，我无法触发像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);
});

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

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

从hammer.js存储库得到澄清

相关文章：