search

hammerjs / hammer.js

A javascript library for multi-touch gestures :// You can touch this
http://hammerjs.github.io
MIT License
24.12k stars 2.62k forks source link

Pan and Pinch Conflict #1295

Open 4piu opened 11 months ago

4piu commented 11 months ago

I have a component that I want to recognize gestures on horizontal axis: 1. drag 2. two finger drag 3. pinch

const mc = new Hammer.Manager(document.getElementById('touch'));
mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, pointers: 0, threshold: 5 }));
mc.add(new Hammer.Pinch({threshold: 0.2, pointers: 2}));

Whatever threshold values I set, two finger drag and pinch won't work well with each other. One gesture always been recognized with high error.

Besides, If the pinch is recognized as two-finger drag, or vice versa, the gesture will not correct "on-the-fly". Eg. if your gesture is mistakenly recognized as drag, no matter how much your finger pinches, it stays in the drag mode (which is expected, but I would like a larger threshold before hammer.js makes the decision)

Please refer to the JSFiddle for demo