Получить точное положение для клика на связанном изображении с помощью jquery

Question

Я работаю над приложением, позволяющим добавлять теги непосредственно к фотографиям с помощью нажатия (например, Facebook, flickr и др.). Тем не менее, я не могу зарегистрировать правильные координаты для клика по фотографии. Проблема в том, что координаты x кажутся абсолютными x расстоянием клика внутри окна браузера (а не внутри фотографии), в то время как координаты y часто отрицательны или невероятно малы (отрицательны в верхней части, малы в нижней части). Это значения, которые я получаю, нажимая возле верхнего левого угла (который должен быть зарегистрирован как 0 или около: «x» => «219», «y» => «- 311» ... 219 кажется правильным, когда измерение расстояния с левой стороны окна браузера, но расстояние должно быть в пределах области фотографии)

В настоящее время я фиксирую события кликов и координаты на фотографии, используя обычную ссылку (ссылка содержит другие релевантные данные фотографии), и выполняю математические вычисления (те же вычисления, что и в документах jquery), прежде чем передать их в мое приложение rails. Я сомневаюсь, что метод во многом связан с ошибочными значениями, хотя я подозреваю, что математическая ошибка или некоторая причудливость CSS могут быть ошибочными. В любом случае, я совершенно ошеломлен.

JS:

$(document).ready(function(){
clickTag();

});

function clickTag(){
   $("#taggable").click(function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        var url = $(this).attr("href");
        courl = url + '&x=' + x + '&y=' + y;
      $.ajax({
        type:"GET",
        url: courl,
        dataType:"script"
        });
        return false;
   }); 
}

CSS:

`<div class="content">
    <div id="image_container" style="position:relative;width:405px;float:left;height:600px;>
        <a href="/tags/new_xy?look_id=188&amp;photo_id=1150" id="taggable" style="position:relative;top:0;left:0px;"><img alt="taggable_image" src="taggable_image.jpg" /></a>
    <div class="tags" id="tags"></div>
    </div>
</div>`

Answer 1

для вашего x и y попробуйте использовать это:

var x = e.pageX - $(this).offset().left;
var y = e.pageY - $(this).offset().top;

дайте мне знать, если это не сработает

РЕДАКТИРОВАТЬ: , чтобы уточнить - вы получаете левое и верхнее смещение непосредственно от элемента DOM. причина, по которой я предлагаю вам использовать функцию jQuery offset (), заключается в том, что jQuery с большей вероятностью рассчитает правильную позицию кросс-браузера.

РЕДАКТИРОВАТЬ 2: Можете ли вы попытаться назначить событие клика на изображение, а не на ссылку. У меня есть скрытое подозрение, что ссылка сообщает о своем верхнем смещении как о нижней части элемента, который она инкапсулирует ...

Answer 2

Моя функция:

function getCoords(target, event)
{
    var $target = $(target);
    var offset = $target.offset();
    var bordersize = $target.attr('border');
    return {
        x:  (event.pageX - offset.left - bordersize) | 0,
        y:  (event.pageY - offset.top - bordersize) | 0
    }
}

звоните:

$("#image").on('click', function(event){
    var coords = getCoords(this, event);
    console.log('X: ', coords.x);
    console.log('Y: ', coords.y);
});

Примечание: используется fast float2int .