在不同监视器大小的画布元素上检测单击事件

Question

你好，堆栈溢出伙伴，

我今天的问题是关于画布（html）上的点击事件。 我在自己的笔记本电脑上使用画布制作了一些很酷的游戏，并且需要在创建的元素上单击事件。 我通过使用了不起的jQuery $("canvas").click(function () {//Blah, Blah, Blah})轻松解决了这个问题$("canvas").click(function () {//Blah, Blah, Blah})但是不得不添加变量来表示从页面顶部到顶部的距离画布的左侧，页面的左侧到画布的左侧。 但是，我意识到了一个问题，如果我更换了具有相同变量的计算机，并且显示器尺寸也发生了变化，则这些变量也必须进行更改以进行补偿（如果画布位于页面的最左上方，这无关紧要。 ）。

我如何仍然能够准确触发点击事件，但使用不同的显示器大小？ 还有其他解决方案吗？

如果您需要，我很乐意举一个例子。

编辑：画布居中，因此如果更改监视器大小，则左侧或右侧的像素将增加/减少。 我设置的变量来自反复试验，这是非常不可靠的（我知道），所以还有另一种方法可以做到这一点吗？

Answer 1

您可以使用本机的MouseEvent属性offsetX和offsetY获取相对于画布位置的单击位置。

这是使用div 的演示 ，但在画布上的作用相同。