Ben Garrett Ben Garrett - 1 year ago 292
Javascript Question

Hammer.JS desktop text selection and swipe conflict

I have a working implementation of Hammer.js 2.06 to use horizontal swiping to jump between pages. But I am finding on the desktop there is a conflict. When a user with a mouse selects a snippet of text, the action also triggers Hammer's swipe event.

I want to allow the default browser behaviour of text selection but also use Hammer's swipe gesture. Is there a work around to have both working together? Or should I disable mouse gesture support as the text selection ability is more important, how would I go about doing that?

delete Hammer.defaults.cssProps.userSelect // as suggested in tips 'n tricks
var myElement = document.getElementById("gestureCanvas"),
nextp = document.getElementById("GotoNextPage"),
prevp = document.getElementById("GotoPrevPage"),
mc = new Hammer(myElement, {
doubletap: false,
pan: false,
press: false,
pinch: false,
rotate: false,
tap: false
// gesture event listeners
mc.on("swipeleft swiperight", function(ev) {
if (ev.type === "swipeleft") {
if (Boolean(nextp.disabled) === false) {;
} else if (ev.type === "swiperight") {
if (Boolean(prevp.disabled) === false) {;

Answer Source

By default the Hammer manager handles both touch and mouse inputs. You can instruct it to deal only with touch input, by setting the inputClass option:

mc = new Hammer(element, { inputClass: Hammer.TouchInput });

This way it will still detect the swipe gesture, but leave mouse actions like text selection alone.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download