javascript - 是否可以将 onclick 事件附加到文档中的特定坐标？

Question

我想知道是否可以将 onclick 事件附加到文档中的特定坐标。也许类似于图像地图中的“区域坐标”的东西，可以让我创建一个矩形或圆形区域，单击该区域会执行一些代码。整个早上都在努力寻找解决方案，希望有更好的编码知识的人可以为我澄清这一点。

Answer 1

您可以将单击事件附加到文档本身，而不是任何特定元素。事件数据应包含单击时鼠标的坐标（clientX 和 clientY）。

假设没有其他元素拦截并取消传播或返回 false，则该事件应该冒泡到文档中，并且您的数据将在那里为您服务。

$(document).click(function(ev){
    console.log(ev.clientX, ev.clientY)
})

这将为您提供窗口中的鼠标指针位置。如果您希望它相对于文档的顶部，则需要使用文档的滚动位置进行一些数学运算。

您还可以编写一些代码来过滤掉属于或不属于给定坐标集的点击。

Answer 2

简短的回答：没有。

长答案：

您可能可以编写一个插件来执行此操作，但我只是要解释一下功能。

基本上，您像往常一样绑定到 click 事件。确保您绑定到的元素是可访问的。

然后，循环遍历一个坐标数组，如果事件位置落在任何坐标中，则调用关联的事件处理程序。

编辑：如果不是很明显，你可以用一个函数替换“一堆坐标”，或者更准确地说，一个数学计算。您可以将方程传递给处理程序，该处理程序适用于您想要的任何类型的 2d 形状。

Answer 3

不，除非你有一个占据这些坐标的元素。相反，您可以将事件绑定到占据该坐标空间的任何元素，并简单地检查事件对象中单击的坐标。