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
Post a Comment