Question

我在使用jQuery / javascript记录x和y坐标时遇到问题，在'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（）事件冒泡到{ {1}}元素。例如：

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(); }（或者{{1}来获得更好的pageX和pageY值元素。

正如我所说，但我还没有机会对此进行实际测试。让我知道它是否有效！

jquery在绝对定位的div中协调图像上的问题

1 个答案: