Нажмите, чтобы не регистрироваться на элементе изображения

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

Вы код работает очень хорошо.

Try This 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

Глядя вокруг, кажется, что смещение не работает в хроме, так что вам нужно будет использовать позицию как так

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