OrbitControls eats touch events?

[armandn]

I have an app that uses raycaster for clicking shapes and Orbit Controls.
An older version of OrbitControls (don't know the version, probably r79, from 2017-02-11) works fine on mobile, but the new version (r103) seems to be eating touch events, as they are no longer picked by the app. Interestingly, mouse events work.

• [X ] r103
• [X ] Chrome
• [X ] Firefox
• [X ] Safari
• [ X] Android
• [ X] iOS

The interactivity examples on three.js work fine too, but they use TrackControls.

[Mugen87]

Does it work if you remove event.preventDefault(); from the onTouchStart() function? The following PR added this line: #13706. It's in production since R92.

[armandn]

Yes, removing event.preventDefault() fixes the problem. I did make a search before opening this issue but #13706 did not come up.

[Mugen87]

see #13706 (comment)

@WestLangley Maybe it's better to remove the usage of event.preventDefault(), see #15715

@arodic What do you think about this issue?

[gkjohnson]

I've typically gotten around this by setting the useCapture option to true in addEventListener:

element.addEventListener( 'mousedown', onMouseDown, true );

It's not super convenient but it does guarantee that your function will get called before the controls callback that stops the propagation. I would be for an option that enables or disables the event "eating" behavior or just removing it entirely.

[WestLangley]

OrbitControls is part of the examples so the user can modify it according to the user's use case.

I am reluctant to support further modifications to OrbitControls unless there is a compelling reason for doing so.

[Mugen87]

Closing, see #18612 (comment).

[Josef37]

For anyone having the same issue: Just use pointer events (pointerdown, pointerup, ...)

OrbitControls uses these and calls event.preventDefault() inside the callbacks, which instructs the brower to not fire mouse events, see Supporting both TouchEvent and MouseEvent (MDN):

If the browser fires both touch and mouse events because of a single user input, the browser must fire a touchstart before any mouse events. Consequently, if an application does not want mouse events fired on a specific touch target element, the element's touch event handlers should call preventDefault() and no additional mouse events will be dispatched.