Как добавить div, где пользователь нажал на страницу в jQuery

Question

У меня проблемы с добавлением div в любое место, где пользователь нажал на страницу

Например

Если пользователь нажимает на боковую часть страницы, он должен добавить div к точному месту, по которому щелкнул, и если он щелкнул в середине страницы, он должен добавить div к точному месту, по которому щелкнул, и так далее, и так далее. вперед

Вот код, который у меня пока есть

$('body').click(function(e){
        console.log("X: " + e.pageX + " Y: " + e.pageY);
});

это для получения x, y шнуров, где пользователь нажал

Любая помощь будет высоко ценится

Спасибо

Арнав ?

Answer 1

Чтобы прослушать событие click, сначала добавьте listener к document.При нажатии создайте новый элемент и установите свойства left и top со значениями координат x и y.

document.addEventListener('click', function(e) {
    const div = document.createElement('div');
    div.innerHTML= `<span>New Content</span>`;
    div.style.position = "absolute";
    div.style.left = e.x + 'px';
    div.style.top = e.y + 'px';
    document.body.appendChild(div);
});

Answer 2

Если вы хотите стилизовать его с помощью CSS (позиция), вам нужно посмотреть на событие для координат.Затем используйте абсолютную позицию CSS, если родительская позиция не является статической.Другой альтернативой является использование position: fixed, который относится к области просмотра (или к началу документа? Не помню)

document.body.addEventListener(‘click’, event => event.target.appendChild(document.createElement(‘div’)))

Некоторые элементы (вход / метки) могут 'У него не должно быть потомков, поэтому вам, возможно, придется убедиться, что целью является действительный узел

. Это должно сработать до конца распространения события (event.currentTarget должен быть телом, но все, что было нажано, вероятно, является event.target).