Как получить координаты кликов внутри div на JS?

Question

[PoodingRex]

Всем привет! Подскажите, пожалуйста, как на JS можно получить координаты кликов внутри элемента и записать их в массив?
Например, есть блок, в нём можно кликом поставить несколько точек. Координаты этих точек в виде left=12% top=55% должно добавиться в массив. Следующая точка - аналогично.
Т.е. по итогу нужно иметь примерно такое:
array(
{"left":"12","top":"55"}
{"left":"45","top":"66"}
);
Может есть какие-то готовые решения? Сколько искал, не смог найти.

Всем заранее спасибо за ответ!

Answer 1

[Andrey Tsvetkov]

Без jquery

var array = [];
document.querySelector("div").addEventListener("click", function (event) {
    var rect = event.target.getBoundingClientRect();
    array.push({
        left: 100 * event.offsetX / rect.width,
        top: 100 * event.offsetY / rect.height
    });
});

Comments

[PoodingRex]

Спасибо за ответ!
Отлично сработало, то что нужно!