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

Question

我有一个名为“container”的初始 div，它是俄克拉荷马州 map 的 height:100% width:100% 图片。这个想法是，当用户点击 map 的某个部分(对于这个例子，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();
        }
}); 
});

我想我需要改变我在 if 语句中处理情况的方式。你会如何处理这个问题？

Answer 1

在比较之前，您需要缩放每个值。将每个 x 乘以您的规范宽度，然后除以实际宽度，然后对 y 和高度执行相同的操作。