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

Help & Support
1

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.

2

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

Can you paste the code for your click handler?

3 
this.entity.element!.on('click', this.onClick, this);
private onClick(event:any) {
    console.log(this.entity.element!.width,this.entity.element!.height);
    console.log(event.x,event.y)
}
---------console------------
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.

4

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

5

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.

6

DEMO

of course, thanks for take a look at this