如何将 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 co-ordinates.

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（位置）设置样式，你必须查看事件的坐标。如果父级是 non-static 位置，则使用 CSS 绝对位置。另一种选择是使用 position: fixed 相对于视口（或文档顶部？不记得了）

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

某些元素 (input/labels) 不能有子元素，因此您可能必须确保目标是有效节点

这应该在事件传播之前起作用（event.currentTarget 应该是正文，但点击的任何内容都可能是 event.target）

如何将 div 附加到用户在 jQuery 中点击页面的位置

How to append a div to where a user has clicked on the page in jQuery

javascript

jquery

html

cursor