Re: Multitouch Pointer Events to Work As Legacy Mouse Events

Hi Doğancan,

thanks for this, makes a lot more sense to see it in action. I'm afraid 
that what you're trying to achieve is not possible. By design, when you 
have more than one active pointer of the same type, only the primary 
will fire compatibility mouse events 
https://w3c.github.io/pointerevents/#tracking-the-effective-position-of-the-legacy-mouse-pointer 
(as otherwise you would end up in a situation where the browser/user 
agent has to keep track of multiple contradictory positions/states for 
what is usually a single mouse pointer position, which will just cause 
problems/confusion and won't work with code out in the wild).

In your case, the primary pointer is the one that presses the button to 
show the interface. Any further touches are non-primary, so won't 
generate any compatibility events.

Further, as you're using the native video player and a natively 
scrollable <div>, there's likely no way to work around this. If these 
were all custom components, I'd suggest listening to pointer events on 
them rather than mouse events - but in this case, it's all left up to 
the user agent. And user agents don't generally treat the case of "one 
finger/pointer down, and a second pointer interacting with content" as a 
regular situation, but rather as some form of multi-touch gesture - they 
won't treat a tap with a second finger as an actual tap, nor will they 
allow native scrolling to occur. This is by design of the user 
agents/browsers, and again not something that can be worked around with 
pointer events I'm afraid.

The only approaches I can recommend here is to move away from the "need 
to keep the button pressed to show the interface" approach and instead 
make it an on/off type toggle (which, incidentally, will also help users 
who may have mobility impairments/trouble confidently operating a 
multi-touch gesture - see WCAG 2.1 SC 2.5.1 Pointer Gestures 
https://www.w3.org/TR/WCAG/#pointer-gestures). Or, keep the current 
approach (though it violates WCAG 2.1), but then reimplement the 
interface that is shown as completely custom, and there listen to 
pointer events explicitly (i.e. rebuild a video player and a scrolling 
div manually ... which is a pain, of course).

Patrick


On 28/12/2020 14:04, Doğancan Kebude wrote:
> Hello Patrick,
> 
> Sorry for the late response. Here is a codepen: 
> https://codepen.io/dkebude/pen/zYKpZvv 
> <https://codepen.io/dkebude/pen/zYKpZvv>
> 
> To clear things further up, we are working on this on a 21.5" device 
> with an infrared touchscreen utilizing Chrome v87.0.4280.88. The 
> touchscreen has a navigator.maxTouchPoints value of 6. So, we can 
> utilize up to six touches.
> 
> What the codepen does is as follows:
> 
> * The interface activates on a pointerdown event on the button with the 
> "PRESS ME" text on it.
> * If a pointerup event occurs on the button, the interface disappears
> * The interface consists of a video and a scrollable text. What we are 
> trying to do is to control the video or scroll the text while we keep 
> pressing the button.
> 
> Best,
> Doğancan
> 
> Patrick H. Lauke <redux@splintered.co.uk 
> <mailto:redux@splintered.co.uk>>, 24 Ara 2020 Per, 16:51 tarihinde şunu 
> yazdı:
> 
>     Hello,
> 
>     I'd suggest that it's tough to debug your issue without seeing an
>     actual
>     reduced test case/example. If you could put something online that'd be
>     helpful.
> 
>     P
> 
>     On 23/12/2020 13:06, Doğancan Kebude wrote:
>      > Hello all,
>      >
>      > I have been trying to implement an interactive device that supports
>      > multitouch to present some information. Mainly I have a sole
>     button on
>      > an html page that opens with a pointerdown event and closes with the
>      > pointerup event occuring for the pointer with the original
>     pointerId. So
>      > a pointer should be on top of the button at all times to view the
>     rest
>      > of the data. Since the button is the only thing on the page, the
>      > pointerdown event will always be the primary event (I think this is
>      > important since -as far as I understood- the non-primary pointer
>     events
>      > cannot produce compatibility mouse events).
>      >
>      > The button then opens up an interface where I can do the
>     following with
>      > the *mouse *(again, as far as I understand, mouse also generates a
>      > primary pointer event):
>      >
>      > 1. Play a standard html video,
>      > 2. Scroll through a standard html text,
>      > 3. Slide through a slick.js carousel.
>      >
>      > Then again, as far as I understand, all of these elements are
>     compatible
>      > with legacy mouse events. However, when I try to achieve any one
>     of the
>      > above-mentioned trio I receive no response.
>      >
>      > * I have tried disabling touch events through touch-action: none
>     on my
>      > CSS file and that didn't solve the issue.
>      > * I have tried to dispatch mouse events on pointer events and
>     still no
>      > response.
>      > * I have tried doing these actions on a page with no other elements,
>      > while I have a primary pointer somewhere else on the page and no
>      > response either.
>      >
>      > Hence, I am looking for a way to get response from the
>     abovementioned
>      > elements with pointers.
>      >
>      > Sorry for my English, a non-native speaker here. And also please
>     excuse
>      > me if I am missing something important. I have been developing a
>     lot of
>      > Python; but I am new to this.
>      >
>      > Best wishes,
>      > Dogancan
> 
> 
>     -- 
>     Patrick H. Lauke
> 
>     https://www.splintered.co.uk/ <https://www.splintered.co.uk/> |
>     https://github.com/patrickhlauke <https://github.com/patrickhlauke>
>     https://flickr.com/photos/redux/ <https://flickr.com/photos/redux/>
>     | https://www.deviantart.com/redux <https://www.deviantart.com/redux>
>     twitter: @patrick_h_lauke | skype: patrick_h_lauke
> 


-- 
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Wednesday, 30 December 2020 10:53:56 UTC