Am trying to detect the pinch event using Hammer.js and the touch emulator in Chrome on desktop. Can detect pan and tap no problem but pinch doesn't seem to be responding. Have modified sample code on codepen here:

In case you aren't familiar with the touch-emulator the pinch event should be simulated by holding shift and clicking and dragging mouse.

(HTML)

<script src=".js"></script>
<script>
  TouchEmulator();
</script>
<script src=".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.";
});

Any ideas?

Thanks

Am trying to detect the pinch event using Hammer.js and the touch emulator in Chrome on desktop. Can detect pan and tap no problem but pinch doesn't seem to be responding. Have modified sample code on codepen here: http://codepen.io/anon/pen/NqWymK

In case you aren't familiar with the touch-emulator the pinch event should be simulated by holding shift and clicking and dragging mouse.

(HTML)

<script src="http://cdn.rawgit./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.";
});

Any ideas?

Thanks

• javascript
• multi-touch
• hammer.js

2 Answers 2

Have e up with following for testing purposes. Have added the following before the mc.on(etc....):

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

This removes the need for more than one touch point to trigger the multitouch.

As I understand it the touch-emulator should simulate more than one touch point but deosn't seem to be working. If anyone can tell why, that would be appreciated.

You need to enable pinch - it is disabled by default.

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

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