无论设备大小如何，获取鼠标在图像上单击的坐标（X，Y）

Question

I have a div with an background image on my website. I want to mark the place where a user clicked within this div with a red dot. I use the following code which works partially (the dot gets placed):

JS:

    document.getElementById('auto').addEventListener("click", function(event) {
        var test = "a variable";
        var x = event.pageX - this.offsetLeft;
        var y = event.pageY - this.offsetTop;

    $(auto).append($('<div class="damage_dot">'+test+'</div>').css({
                        left: x + 'px',
                        top: y + 'px',
                        }));            

Problem:
the dot never appears at the place where I clicked. If I scroll or try to do the same on a mobile device, the differences between the point where I clicked and the dot are getting bigger.

Is there a way to achieve this?
Thanks a lot in advance!

Answer 1

Please check if this is what you are looking for:

https://plnkr.co/edit/vSdGW5TIGrGYpAdk?open=lib%2Fscript.js

 (function(funcName, baseObj) { document.getElementById('auto').addEventListener("click", function(event) { var x = event.clientX; var y = event.clientY; $(auto).append($('<div class="damage_dot">a</div>').css({ left: x + 'px', top: y + 'px', })); // Add your code here }); })("docReady", window);

 .damage_dot{ color:red; position: absolute; height:2px; width: 2px; }