检测不同显示器尺寸的画布元素上的点击事件

Question

Hello Stack Overflow Buddies，

我今天的问题是关于画布上的点击事件（html）。我正在自己的笔记本电脑上使用画布制作一些很酷的游戏，我需要在我创建的元素上点击事件。我通过使用令人敬畏的jQuery $("canvas").click(function () {//Blah, Blah, Blah})轻松地遇到了这个问题，但是必须添加从页面顶部到画布顶部的距离变量以及页面左侧到画布左侧的距离。但是，我已经意识到如果我用相同的变量更改计算机并且监视器大小发生变化，那么变量也必须改变以进行补偿（如果画布位于页面的最左上角，这将无关紧要）。

如何能够在不同的显示器尺寸上准确地触发点击事件？还有其他解决办法吗？

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

编辑：画布居中，因此如果更改了显示器尺寸，左侧或右侧的像素将增加/减少。我设置的变量来自试验和错误，这是非常不可靠的（我知道），那么还有另一种方法吗？

Answer 1

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

使用div的

Here is a demo但它在画布上的工作方式相同。