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中不起作用，所以你需要使用这样的位置

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

点击不在图像元素

2 个答案: