Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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) {
      nextp.click();
    }
  } else if (ev.type === "swiperight") {
    if (Boolean(prevp.disabled) === false) {
      prevp.click();
    }
  }
});
like image 652
Ben Garrett Avatar asked Oct 28 '25 01:10

Ben Garrett


1 Answers

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/

like image 122
dbr Avatar answered Oct 31 '25 10:10

dbr



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!