单击不注册图像元素

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>

我在Jsfiddle中尝试了没有CSS的代码，它可以工作，但是当我添加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中不起作用，所以你需要使用像这样的位置

$(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);;
    });
});