Handling devices with stylus and touchscreens

Hi Roll20 developers. I love the system, but we noticed when playing that the website seems to only handle drawing or dragging with mouse devices. I've noticed several similar issues being closed with a recommendation to chrome users to disable direct manipulation in chrome://flags, but this is really a workaround, i.e. see: <a href="https://app.roll20.net/forum/post/6297337/slug%7D?fbclid=IwAR3yB7NaXIfDv_LEsiH5EVjxjeAtPKS7I1FQsV1tBfYwApN-gzhNegiyrvw" rel="nofollow">https://app.roll20.net/forum/post/6297337/slug%7D?fbclid=IwAR3yB7NaXIfDv_LEsiH5EVjxjeAtPKS7I1FQsV1tBfYwApN-gzhNegiyrvw</a> <a href="https://app.roll20.net/forum/post/6222956/slug%7D?fbclid=IwAR1qHgVT01BjVoWWN4qXgHeqPtU1YPRDB3qhl7BrbGOIasS1hnCbHhBNTQM" rel="nofollow">https://app.roll20.net/forum/post/6222956/slug%7D?fbclid=IwAR1qHgVT01BjVoWWN4qXgHeqPtU1YPRDB3qhl7BrbGOIasS1hnCbHhBNTQM</a> I am a developer on the Chrome team, and I believe what's going on here is that the game is only handling mouse events. By default chrome delivers touch (and pointer) events when a non-mouse device is used. If the user taps that device, then we generate what we call legacy mouse events to simulate a click at that location. However, if the game used pointer event (or additionally added touch event) listeners, it would be able to handle interactions by other mouse or touch. There's a blog post on the topic here: <a href="https://developers.google.com/web/fundamentals/design-and-ux/input/touch#add_event_listeners" rel="nofollow">https://developers.google.com/web/fundamentals/design-and-ux/input/touch#add_event_listeners</a> And you can see an example I coded up on jsbin here: <a href="https://jsbin.com/banihuc/edit?html,css,js,output" rel="nofollow">https://jsbin.com/banihuc/edit?html,css,js,output</a> TLDR; I think if you replace the mouse listeners with pointerevent listeners and add the CSS touch-action: none to the game area it will mostly "just work" for users with stylus and touchscreens. The relevant specifications are: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action</a>

Apologies, the pointer events link should have been: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events</a> Also note that older versions of Safari do not support pointer events, but will fire touchstart / touchmove / touchend events for touch driven events. Chrome considers the pointer events to be the native type but will also fire touch events. The linked developer article has guidance on how to handle any type of event on all browsers.

I am a developer on the Chrome team, and I believe what's going on here is that the game is only handling mouse events. That's very likely, considering Roll20 doesn't really have much official support for alternative inputs like touch-screens. But I recall that there might be plans to improve some of these things, so hopefully they'll take a note of your comments. Also note that older versions of Safari do not support pointer events, but will fire touchstart / touchmove / touchend events for touch driven events. Chrome considers the pointer events to be the native type but will also fire touch events. The linked developer article has guidance on how to handle any type of event on all browsers. Roll20 only officially supports Firefox &amp; Chrome, so at least that Safari thing doesn't need to be considered.