Получить координаты (X, Y) щелчка мышью по изображению независимо от размера устройства

Question

У меня на сайте есть div с фоновым изображением. Я хочу отметить место, где пользователь щелкнул внутри этого div, красной точкой. Я использую следующий код, который работает частично (точка помещается):

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',
                        }));            

Проблема:
точка никогда не появляется в том месте, где Я щелкнул. Если я прокручиваю или пытаюсь сделать то же самое на мобильном устройстве, разница между точкой, в которой я щелкнул, и точкой становится больше.

Есть ли способ добиться этого?
Заранее большое спасибо!

Answer 1

Убедитесь, что это именно то, что вы ищете:

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

<pre><code>(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); <pre><code>.damage_dot{ color:red; position: absolute; height:2px; width: 2px; }