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



我想知道是否可以将onclick事件附加到文档中的特定坐标。也许类似于图像映射中的"区域坐标",它允许我创建一个矩形或圆形区域,单击该区域时将执行一些代码。整个早上都在试图找到解决方案,希望有更好的编码知识的人可以为我澄清这一点。

您可以将单击事件附加到文档本身,而不是任何特定元素。 事件数据应包含单击时的鼠标坐标(客户端 X 和客户端 Y)。

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

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

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

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

简短的回答:

长答案:

你可以写一个插件来做到这一点,但我只是要解释一下功能。

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

然后,遍历坐标数组,如果事件位置落在任何坐标中,则称为关联的事件处理程序。

编辑:如果不是很明显,你可以用函数替换"一堆坐标",或者更准确地说,用数学计算代替。您可以将公式传递给处理程序,该处理程序适用于您想要的任何类型的 2D 形状。

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

最新更新