使用 Hammer.js 和触摸模拟器的捏事件答案

【问题标题】：Pinch event with Hammer.js and touch-emulator使用 Hammer.js 和触摸模拟器的捏事件
【发布时间】：2015-04-23 10:08:06
【问题描述】：

我正在尝试使用 Hammer.js 和桌面版 Chrome 中的触摸模拟器检测捏合事件。可以检测到平移和点击没有问题，但捏似乎没有响应。在这里修改了codepen上的示例代码： http://codepen.io/anon/pen/NqWymK

如果您不熟悉触摸模拟器，则应通过按住 shift 键并单击并拖动鼠标来模拟捏合事件。

(HTML)

<script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>
<script>
  TouchEmulator();
</script>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>

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

(CSS)

#myElement {
  background: silver;
  height: 300px;
  text-align: center;
  font: 30px/300px Helvetica, Arial, sans-serif;
}

(JS)

var myElement = document.getElementById('myElement');

// create a simple instance
// by default, it only adds horizontal recognizers
var mc = new Hammer(myElement);

// listen to events...
mc.on("pinch pan tap", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});

有什么想法吗？

谢谢

【问题讨论】：

标签： javascript multi-touch hammer.js

【解决方案1】：

出于测试目的提出了以下内容。在 mc.on(etc....) 之前添加了以下内容：

mc.add(new Hammer.Pinch({ threshold: 0, pointers: 0 }));

这消除了触发多点触控的需要多个触摸点。

据我了解，触摸模拟器应该模拟多个触摸点，但似乎无法正常工作。如果有人能说出原因，那将不胜感激。

【讨论】：

【解决方案2】：

您需要启用捏合 - 默认情况下禁用。

var hammertime = new Hammer($('#touchDiv')[0], {});

hammertime.get('pinch').set({ enable: true });
hammertime.on('pinch', function(ev) {
    console.log('zoom ' + ev.scale);
});

【讨论】：