在不同屏幕大小的图像中检测鼠标点击的位置-Jquery/JavaScript

我有一个名为“container”的初始div，它是俄克拉荷马州地图的

高度：100%宽度：100%

图像。其思想是，当用户单击地图的某一部分（例如，panhandle）时，div被切换到一个div，即panhandle图像。我通过知道鼠标单击时的像素位置来确定用户单击的位置

问题是，不同尺寸的屏幕的像素值不同。下面的代码适用于我自己大小的窗口，但当我运行实际程序的代码时，窗口较小，因此

if

语句中描述的区域不在panhandle周围

$(document).ready(function()
{
    $("#container").click(function(e)
    {
        var x = event.pageX;
        var y = event.pageY;

        if(x >= 45 && x <= 550 && y >= 245 && y <= 330) 
        {
            //alert('You clicked the panhandle!');
            $("#region1").toggle();
            $("#container").toggle();
        }
}); 
});

$（文档）.ready（函数（）
{
$（“#容器”）。单击（函数（e）
{
var x=event.pageX；
var y=event.pageY；
如果（x>=45&&x=245&&y你不应该假设有明确的像素值，并期望你的网站可以在各种设备和浏览器上运行——特别是在iPad或Android平板电脑上，在这些设备上，你会遇到缩放和dpi设置等复杂问题

我的建议是，根据您的位置/尺寸规格，始终使用宽度和高度的%。例如，您的平底锅手柄可能位于（0.23,0.76）和尺寸（0.12,0.08）等

在任何浏览器中，获取框尺寸并将这些%值相乘以获得实际像素值。
在比较之前，您需要缩放每个值。将每个x乘以标准宽度，除以实际宽度，然后对y和高度执行相同操作。
感谢您解释如何获取%尺寸。我知道这就是di我不知道该怎么做。再次感谢你发布了如何调整价值的帖子。这比简单地告诉我我需要这么做更有帮助。