javascript - Hammer.js panstart 具有自定义平移手势

标签 javascript hammer.js gestures

我需要一个带有一个指针和多个指针的平移。一个指针用于在 map 上绘制,多个指针用于拖动 map 。 创建自定义平移手势后,我无法触发 native 平移事件,例如 panstartpanend。如何让两个自定义手势分别触发 native 事件。

这是我的 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 repository的澄清

关于javascript - Hammer.js panstart 具有自定义平移手势,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33852163/

相关文章:

javascript - JQuery 不会删除我的 div 来响应 div 单击事件

javascript - 从外部函数绑定(bind)事件监听器

javascript - 除了事件之外,将参数传递给 Angular 锤函数

android - 捕获具有辅助功能的手势(例如触摸浏览)

javascript - 未捕获( promise )DOMException : The element has no supported sources

javascript - Bootstrap范围 slider CSS错误

javascript - 如何确保 JavaScript .submit() 尊重附加到表单的事件处理程序

javascript - HammerJS 动态添加元素

iphone - iOS - 如何显示 iOS 应用程序的手势提示?

gestures - cocos3d 广告牌平移手势