How can I get the coordinates of a mouse click on a target element?

I have added a click event to an element with 900 x 1000, but the x and y values obtained from the event do not correspond to the width and height of this element.

When you say element, do you mean HTML element or an element component?

Can you paste the code for your click handler?

this.entity.element!.on('click', this.onClick, this);
private onClick(event:any) {
900 1900
387 622

Even if I click on the bottom of this element, the y value in the log is much smaller than the height.

Maybe I should use some transparent buttons as click areas instead of using the x and y coordinates of mouse events?

Hi @fftidus,

Can you share a sample project that showcases your problem?

If you are trying to match PlayCanvas UI elements with HTML elements / input events, I’m thinking the difference may be coming from the pixel ratio applied.


of course, thanks for take a look at this