Javascript将鼠标单击与按钮的xy进行比较

Question

我正在尝试将html按钮的x和y设置为用户的mouseclick的x和y，我这样做如下：

function buttonPressed(event, id){
var mainEvent = event ? event : window.event;
var mousex=event.clientX;
var mousey=mainEvent.screenY;
var y= $('#'+id).position();
var x= document.getElementById(id).offsetLeft;

console.log(y);
console.log(mousey);

这显示了两种获取按钮和鼠标值的不同方法（event.clientX，mainEvent.screenY，$（'＃'+ id）.position（）（使用jquery）和offsetLeft）。 但是，这些技术似乎都不起作用，因为值不对齐，即当我单击按钮的左上角时，这些值不相同甚至不相似。 另外，似乎差异也在变化，例如：如果我在左上角有一个按钮，在左上角有一个右上角，则值可能相差100，而在底部则相差-100。 我怎样才能达到我想要的（能够比较mousex和button x）？

Answer 1

客户端X / Y鼠标指针相对于窗口的X / Y坐标

X / Y偏移量相对于触发事件的元素的鼠标指针X / Y坐标

屏幕X / Y相对于物理屏幕/显示器的左上方

那就是为什么你在这里变得与众不同

var mousex=event.clientX;
var mousey=mainEvent.screenY; 

两者都使用clientX