单击不注册图像元素

Question

我正在尝试单击以在图像标签上注册，以获取图像单击的坐标，以将svg元素放置在其顶部。 据我了解，我拥有代码的方式应该解释冒泡事件，但我不确定100％。 有人可以帮助我了解我做错了什么，我可能会从中丢失信息吗？ 截至目前，什么也没有运行。

$(".playing-field").on("click", "#picture", function(e) {
  var offset = $("#picture").offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  console.log(relativeX, relativeY);
});

我之前忘了添加HTML ...

<div class="playing-field">
    <img id="picture" src="assets/images/image.jpg">
    <svg class="speechbubbles" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">
</div>

我在没有CSS的情况下在Jsfiddle中尝试了代码，并且可以正常工作，但是当我添加CSS时却没有。 我对CSS规则不太熟悉，所以有人可以告诉我为什么它会干扰图像的点击吗？

.playing-field {
position: relative;
height: 500px;
width: 100%;
}

#picture{
position: absolute;
}
.speechbubbles{
position: absolute;
}

Answer 1

您的代码运行得很好。

试试这个https://jsfiddle.net/2bm4zjdz/1

$(".playing-field").on("click", "#picture", function(e) {
  var offset = $("#picture").offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
    alert( 'x : ' + relativeX + ' y :' + relativeY);

});

Answer 2

环顾四周，看来偏移量在chrome中不起作用，因此您需要像这样使用position

$(function () {
    $('#picture').click(function (e) {
        var offset = $(this).position();
        var relativeX = (e.pageX - offset.left);
        var relativeY = (e.pageY - offset.top);
        alert('x :' + relativeX + ' y :' + relativeY);;
    });
});