Question

我正在使用Javascript / Jquery和CSS将俄克拉荷马州地图的“背景”图像填满屏幕。想法是用户将点击地图的几个不同“区域”中的某一个，并且将基于他们点击的区域触发事件。

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

那么，有没有办法确定用户点击屏幕的位置？我可能会提供一些我已经制作并尝试过的代码;现在它全部都是碎片，因为我还在尝试不同的东西！

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

$(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;
});

确定用户单击图像的位置

1 个答案: