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