在不同屏幕尺寸下检测图像内鼠标单击的位置-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();
        }
}); 
});

我在想我需要在if语句中更改处理情况的方式.您将如何处理？

解决方法:

您需要先缩放每个值,然后再进行比较.将每个x乘以您的规范宽度,然后除以实际宽度,并对y和height进行相同操作.

标签：mouse-position,javascript-events,javascript,jquery,pixels
来源： https://codeday.me/bug/20191208/2092911.html