Ripple: ripple start point is not init in mobile env

[Lanace]

Describe the bug

in mobile, ripple position is always top: 0px, left: 0px.
because onMouseDown params is not MouseEvent in mobile
it's TouchDown event.

so use targetTouches pageX and pageY

var offset = DomHandler.getOffset(targetRef.current);

var x =
  event.targetTouches[0].pageX -
  offset.left +
  document.body.scrollTop -
  DomHandler.getWidth(inkRef.current) / 2;
var y =
  event.targetTouches[0].pageY -
  offset.top +
  document.body.scrollLeft -
  DomHandler.getHeight(inkRef.current) / 2;

and i have one question...
why event prevent in onTouchStart?
i want scroll event, but touch start event prevented.

var onTouchStart = function onTouchStart(event) {
  onMouseDown(event);
  // event.preventDefault();
};

Reproducer

No response

PrimeReact version

8.7.1-SNAPSHOT

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 106.0.5249.119

Steps to reproduce the behavior

1. in mobile device, click button
2. ripple effect start incorrect position

Expected behavior

ripple effect start on touched point

[Lanace]

cc @kkimdev

ref: #3499

[melloware]

@Lanace the reason I use event.preventDefault is because of this: https://web.dev/mobile-touchandmouse/

The order of mouse events is this:

So it would call onMouseDown after calling onTouchStart and I don't think you want that happening if TouchStart is fired you don't want to then fire again on MouseDown.

[melloware]

Can you review my PR.

[melloware]

OK I was able to handle event.preventDefault a different way.