Почему .alert () постоянно показывает только одни и те же значения?

Question

Мне нужно реализовать код, который показывает координаты нажатой области с помощью функции .alert (). Вот код jQuery, который я получил:

$(document).ready(function(){
                $("#plot").bind("click", function(event){
                    alert(event.target.offsetLeft + ", " + event.target.offsetTop);
                })
            });

"График" - это идентификатор области холста. Каждый раз, когда я нажимаю на область, всплывающее окно .alert () с одинаковыми значениями. Что это значит в моей программе и как я могу это исправить?

Answer 1

event.target.offsetLeft и event.target.offsetTop - это координаты элемента, в котором произошел щелчок. Поскольку он не перемещается, значения не изменяются.

Вам нужны переменные event.clientX и event.clientY:

$(document).ready(function() {
  $("#plot").bind("click", function(event) {
    console.log(event.clientX + ", " + event.clientY);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:100px;height:100px;background:pink" id="plot"></div>

Подробнее о MDN

вкл. event.clientX

вкл. event.target

Answer 2

Для всех тех, кому нужна координата точки нажатия внутри области: я не рекомендую использовать offsetTop и offsetLeft (или offset().top и offset().left). Вместо них лучше использовать offsetX и offsetY, которые позволяют найти относительную координату:

$(document).ready(function(){
            $("#plot").bind("click", function(event){
                alert(event.offsetX + ", " + event.offsetY);
            })
        });

Я очень надеюсь, что этот дополнительный ответ будет полезен для всех тех, ктоищу его.