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) {
      nextp.click();
    }
  } else if (ev.type === "swiperight") {
    if (Boolean(prevp.disabled) === false) {
      prevp.click();
    }
  }
});
The accepted solution didn't work for me so I Googled and this is what I found.
“I can’t select my text anymore!”
Hammer is setting a property to improve the UX of the panning on desktop. Regularly, the desktop browser would select the text while you drag over the page. The user-select css property disables this.
If you care about the text-selection and not so much about the desktop experience, you can simply remove this option from the defaults. Make sure you do this before creating an instance.
delete Hammer.defaults.cssProps.userSelect;
http://hammerjs.github.io/tips/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With