v-touch-swipe.mouse trigger pointerleave/mouseleave

[thefeymesaleng]

What happened?

when using v-touch-swipe.mouse, pointerleave event is triggered even mouse is still inside the element

What did you expect to happen?

v-touch-swipe.mouse shouldn't trigger pointerleave/mouseleave

Reproduction URL

https://codesandbox.io/s/inspiring-feather-pzk4gp?file=/src/pages/Index.vue

How to reproduce?

try swipe on the element, u can see that pointerleave event is also triggered. can try to reset with @contextmenu

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Directives (quasar)

Platforms/Browsers

No response

Quasar info output

Operating System        Windows_NT(10.0.22621) - win32/x64
NodeJs                  16.13.1

Global packages    
  NPM                   8.12.1
  yarn                  1.22.18
  @quasar/cli           2.2.1
  @quasar/icongenie     3.0.0
  cordova               Not installed

Relevant log output

No response

Additional context

No response

[pdanpdan]

Unfortunately in order to work touch directives set pointer-events: none to body children, so the browser thinks it's a pointerleave.

You can check a quick workaround - it's not perfect, but it mostly works

https://codepen.io/pdanpdan/pen/QWJJeYv?editors=1010

[thefeymesaleng]

Hi, thank you for the work around. I can't get my head around the no-pointer-events--children. My question should have been, why there's a difference implementation between the swipe touch and mouse. If you look into my repo below, and test it on mobile/touch and desktop/mouse, you can see that on touch it does not adding no-pointer-events--children, so pointerleave kinda run more intuitively, while with mouse, it triggering pointerleave prematurely as there's extra class added to it. Tried to run it with the class no-pointer-events--children, but no sure how to detect the actual pointerleave as there's no more pointer-events through it.

https://codesandbox.io/p/sandbox/zealous-wilbur-ss3vmy?file=%2Fsrc%2Fpages%2FIndex.vue%3A39%2C28

[thefeymesaleng]

Okay should have try it before commented, I just remove the no-pointer-events--children class and it seems to work as I want it. But coming back to my question, would it be more intuitive to have it working the same for touch and mouse?

[pdanpdan]

This is a much simpler workaround: https://codepen.io/pdanpdan/pen/rNQoOgj
No extra code, just a class to override pointer events where you need it

[thefeymesaleng]

@pdanpdan thanks! Neat indeed!