So, I found some weird behavior of long presses in Chrome and Firefox for Android. I'm trying to avoid scrolling, context menus, vibration and selecting text. Also, I need the touch not to be canceled. I set a simple page like this:
var logger = document.getElementById("logger")
function touchHandler(e) {
e.preventDefault()
logger.innerText += e.type + "\n"
}
function contextMenuHandler(e) {
e.preventDefault()
logger.innerText += e.type + "\n"
}
window.addEventListener("touchstart", touchHandler)
window.addEventListener("touchmove", touchHandler)
window.addEventListener("touchend", touchHandler)
window.addEventListener("touchcancel", touchHandler)
window.addEventListener("contextmenu", contextMenuHandler)
<pre id="logger"></pre>
And I got these results, when pressing for a bit without moving the finger:
- When I default prevent both touch events and the
contextmenu
event:- Chrome logs:
touchstart contextmenu touchend
Note that Chrome vibrates at the same timecontextmenu
is fired. - Firefox logs:
touchstart contextmenu touchcancel
Firefox cancels the touch event as soon ascontextmenu
is fired, which is a problem for me.
- Chrome logs:
- When I default prevent only touch events:
- Chrome logs:
touchstart contextmenu touchend
Nice. It dosen't vibrate. - Firefox logs the same thing. This time, it didn't cancel the touch, but it selected some text.
- Chrome logs:
-
- When I default prevent only the
- Chrome logs:
touchstart contextmenu touchend
It vibrates and scrolls, however. - Firefox logs:
touchstart contextmenu touchcancel
Again, it's canceling the touch, but no text is selected.
contextmenu
event: - Chrome logs:
- Finally, when no events are default prevented:
- Chrome logs:
touchstart contextmenu touchend
And still vibrates and scrolls. - Firefox logs:
touchstart contextmenu touchcancel
Same thing :(
- Chrome logs:
So, is there any way to prevent scrolling, context menus, vibration and selecting text, and to avoid Firefox canceling the touch?