2

I use this standard code for Pan / Pinch (1) with Hammer.js :

var mc = new Hammer(document.body);

mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith(mc.get('pan'));

// let the pan gesture support all directions. this will block the vertical scrolling on a touch-device while on the element
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright panup pandown tap press pinchstart pinchmove", function(ev) {
    $('#myElement').text(ev.type +" gesture detected. ev.scale=" + ev.scale + "  ev.deltaX,Y=" + ev.deltaX +'  ' + ev.deltaY);
});

How to get the hammer.js pan events only for touch devices and not for desktop computer Click+Drag? (because I have already working code for desktop computer click+drag, and I don't want to rewrite this!)

Note (1) : By the way, is this code good?, why is the recognizeWith really needed? :

2 Answers 2

9

You may force Hammer.js to use the input class that you want by setting inputClass option:

var hammer = Hammer(element, {
  inputClass: Hammer.TouchInput
})

You may want also to support pointer events when available:

var hammer = Hammer(element, {
  inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
})

Hammer.js has following inputClasses built in:

  • PointerEventInput
  • TouchInput
  • MouseInput
  • TouchMouseInput
6

You can check 'pointerType' property value in event (ev) object. It should be "mouse" for desktop.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.