javascript - Click not registering on Image element -


i'm trying click register on image tag coordinates of image click position svg element on top of it. far understand, way have code should account bubbling events, i'm not 100% certain. can me understand i'm doing wrong, information might missing it? of now, nothing runs.

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

i forgot add html before...

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

i tried code in jsfiddle without css, , works, when add css, doesn't. i'm not familiar css rules, can tell me why interfere clicking of image?

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

you code runs well.

try 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);  }); 

Comments

Popular posts from this blog

c# - Better 64-bit byte array hash -

webrtc - Which ICE candidate am I using and why? -

php - Zend Framework / Skeleton-Application / Composer install issue -