Javascript 如何在没有jquery的情况下在游标位置创建新的div元素

我如何创建一个JavaScript函数，当它运行时，在游标位置创建一个新的

元素，该元素具有类

11

和id

12

；然后在2秒后删除它

---

我不想使用任何外部脚本。我只希望它是原始JavaScript。

首先，您必须使用鼠标事件。鼠标事件包含clientX、clientY、pageX、pageY、offsetX、offsetY、screenX、screenY等属性。查找差异。这些是只读属性，显示坐标基于属性的类型

因此，基本上您可以创建一个元素，将位置设置为绝对位置，并使用鼠标事件属性（如pageX和pageY）设置顶部和左侧属性

添加函数

document.body.setAttribute('onclick', 'myFunction(event)');

然后创建元素

function myFunction(ev){
  var div = document.createElement('div');
  div.id = '12';
  div.className = '11';

  div.style.position = 'absolute';
  div.style.height = '100px';
  div.style.width = '100px';
  div.style.backgroundColor = 'cornflowerblue';
  div.style.top = ev.pageY;
  div.style.left = ev.pageX;

  var body = document.getElementsByTagName('body');
  body[0].appendChild(div);

  //you can easily destroy in 2 seconds using set timeout
  setTimeout(function(){
    body[0].removeChild(div);
  }, 2000)
}

---

试试看。此代码将在您单击鼠标的位置创建一个div元素。

您可能可以对元素使用

onmouseenter

事件。您将能够在它旁边创建一个div，因为您可以使用curent元素

onmouseinter=“myinterfunction（this）”

@Gilsdav我正试图让它为整个html文档工作。对不起。要将div放置在所需的位置，可以创建一个函数来设置“temp”div的x轴和y轴（使用左侧和顶部样式）。要获取光标的坐标，请注册到event mouseMove

document.captureEvents（event.mouseMove）；document.onmousemove=myFunction。之后，您只需要处理“显示”样式和
setTimeout（）
。