Определение положения щелчка мыши на изображении на экранах разных размеров - Jquery / JavaScript

Question

У меня есть начальный div, называемый «контейнер», который является height:100% width:100% изображением карты Оклахомы.Идея состоит в том, что когда пользователь щелкает определенную часть карты (для этого примера - ручку с панорамированием), div переключается на div, который является изображением с панорамированием.Я определяю, где пользователь щелкает, зная местоположение пиксела мыши при нажатии.

Проблема в том, что значения пикселей различны для экранов разных размеров.Ниже приведен код, который работает для моего собственного размера окна, но когда я запускаю код для реальной программы, окно становится меньше, и, таким образом, область, описанная в операторе if, не находится вокруг ручки.

$(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) и т. Д.

В любом браузере получите размеры блока и умножьте эти значения%, чтобы получить фактические значения пикселей.