Question

我有一个名为“容器”的初始div，它是俄克拉荷马州地图的height:100% width:100%图像。这个想法是当用户点击地图的某个部分（对于这个例子，狭长）时，div被切换到一个div，这是一个狭长的图像。我通过了解鼠标点击时的像素位置来确定用户点击的位置。

问题是，不同尺寸屏幕的像素值不同。下面是适用于我自己的大小窗口的代码，但是当我运行实际程序的代码时，窗口较小，因此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和高度执行相同的操作。

Answer 2

您不应该假设明确的像素值，并希望您的网站能够在各种设备和浏览器上运行 - 特别是在iPad或Android平板电脑上，您可能会有缩放和dpi设置等复杂功能。

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

在任何浏览器中，获取框尺寸并将这些％值相乘以获得实际像素值。

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

2 个答案: