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绝对位置。另一种选择是使用位置：相对于视口（或文档顶部？不记得了）的固定位置

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

某些元素（输入/标签）不能有子元素，因此您可能必须确保目标是有效节点

这应该在事件传播方面起作用（event.currentTarget应该是主体，但是单击任何东西都可能是event.target）

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

2 个答案: