Hammer.js pan event only for touch devices and not for desktop computer Click+Drag

问题

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? :

回答1:

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

回答2:

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

来源：https://stackoverflow.com/questions/26319994/hammer-js-pan-event-only-for-touch-devices-and-not-for-desktop-computer-clickdr

标签

javascript

ios

mobile

hammer.js