JQuery координировать задачи на изображении с в абсолютном позиционном DIV

Question

У меня проблема с записью координат x и y с использованием jQuery / javascript на изображении, которое находится в контейнере 'position: absolute div'.

По сути, то, что должно произойти, происходит где-то на изображении, и в эти координаты помещается div, содержащий информацию.

Однако, когда контейнер div изображения имеет абсолютную позицию, координаты x и y отключены, но это необходимо для наложения изображения на более чем div, если кто-то не может придумать лучшего способа?

ниже мой код, любая помощь приветствуется

<style>
    #image_container {position: absolute}
    #test_img {}
    .image_dot { height: 5px; width: 5px; background-color: red; position: absolute; }
</style>

<div id="image_container">
    <img src="mrt.jpg" id="test_img" /> 
</div>
<script type="text/javascript">
      $("#test_img").click(function(event) {
        var x = event.pageX - this.offsetLeft;
        var y = event.pageY - this.offsetTop;
        $("#image_container").append('<div class="image_dot" id="uniqueid" style="display: none;">Some text</div>');
        $("#unqiueid").css("top",x+"px").css("left",y+"px").show();
    });
</script>

Answer 1

Я не уверен, сработает ли это, поскольку у меня нет времени на создание тестового примера, но я думаю, что если это возможно, вам следует просто позволить событию click () всплыть до элемента body.Например:

$(body).click(function(e) {
    var x = event.pageX;
    var y = event.pageY;
    $("body").append('<div class="image_dot" id="uniqueid" style="display: none;">Some text</div>');
    $("#unqiueid").css("top",x+"px").css("left",y+"px").show();
}

Если все в любом случае позиционируется абсолютно (и не относительно), это не должно иметь значения, и я считаю, что вы должны получить лучшие значения pageX и pageY, используя body (или, может быть, window?) элемент.

Как я уже сказал, у меня не было возможности проверить это на самом деле.Дайте мне знать, если это работает!