jquery - 确定用户单击图像的位置

Question

我正在使用 Javascript/jQuery 和 CSS 来让俄克拉荷马州 map 的“背景”图像填充屏幕。这个想法是，用户将单击 map 上几个不同“区域”中的某个区域，并且将根据他们单击的区域触发事件。

我的问题是我需要确定用户点击的位置。我尝试过使用像素，但像素不可靠，因为尺寸会根据屏幕尺寸而改变。我考虑过将背景图像切割成单独的图像并使它们各自成为自己的容器，但这似乎不必要地复杂。

那么，有没有办法让我确定用户在屏幕上单击的位置？我可以提供一些我已经编写并尝试过的代码；现在一切都支离 splinter 了，因为我仍在尝试不同的事情!

这是我之前尝试过的一件事:

$(document).ready(function()
{
    $("#container").click(function(e)
    {
        var x = ("#container").pageX;
        var y = ("#container").pageY;
        if(x >= ? && x <= ? && y >= ? && y <= ?) 
        {
            alert('You clicked the panhandel!');
        }
   }); 
});

我将 if 语句要求中的 x 和 y 值设置为“装箱”我希望弹出警报的区域的像素值，但什么也没有发生了。

编辑感谢您的帮助和时间，我非常感激!我困惑的最后一件事是 if() 内部应该包含什么内容。由于元素将是屏幕的大小，我认为我真的不需要偏移，但是

 if(x >= 200 && x <= 300 && y >= 200 && y <= 300) 

对于不同尺寸的屏幕将不准确；

也就是说，我找到的图像部分有多大的“坐标”对于另一个尺寸的屏幕可能会有所不同，所以我应该如何处理x和y?

我不知道如何正确地解释这一点，如果最后一部分无法得到解答，我会理解并继续寻找!

Answer 1

http://api.jquery.com/event.pageX/和 http://api.jquery.com/event.pageY/

$(element).click(function(event) {
    var x = event.pageX,
        y = event.pageY;
});