2015-04-23 88 views
3

我试图在桌面上使用Hammer.js和Chrome中的触摸模拟器来检测捏事件。可以检测平底锅并点按没有问题,但掐不似乎是响应。修改了codepen上的示例代码: http://codepen.io/anon/pen/NqWymK与Hammer.js和触摸模拟器捏事件

如果您不熟悉触摸模拟器,应通过按住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."; 
}); 

任何想法?

谢谢

回答

5

为了测试目的,想出了以下内容。在mc.on(etc ....)之前添加了以下内容:

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

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

据我所知,触摸模拟器应该模拟多个触摸点,但似乎没有工作。如果有人能说出原因,那将不胜感激。

0

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

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

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