Question

我想从一个空白页开始，当用户（鼠标）点击页面中的任意位置时，该位置会出现一个框。

这就是我到目前为止，我隐藏了这个框，然后通过添加一个事件监听器来改变了样式但是如何创建另一个允许用户点击任何地方的事件，框出现，然后再次点击另一个点和另一个框出现在该位置。 - 仅使用vanilla Javascript

先谢谢，这是我的html / css代码：

  <div id ="box"></div>

  #box{
  width:100px;
  height:100px;
  background-color: blue;
  position: absolute;
  visibility: hidden;
  }

和Javascript代码：

 var box = document.getElementById("box");
       addEventListener('click', function(){
          box.style.visibility="visible";

      });

Answer 1

您可能会获得offsetX / Y或pageX / Y.偏移量相对于目标元素，页面 - 相对于文档

var box = document.getElementById("box");
   addEventListener('click', function(event){
     box.style.visibility="visible";
     box.left = event.pageX;
     box.top = event.pageY;
   });

Answer 2

您可以使用event.pageX和event.pageY来获取相对于文档左上角的光标位置。试试下面的内容：

＆＃13;

addEventListener('click', createBox);

function createBox(event) {
  var box = document.createElement('div');
  box.className = 'box';
  box.style.left = event.pageX + 'px';
  box.style.top = event.pageY + 'px';
  document.body.appendChild(box);
}

＆＃13;

.box {
  padding: 10px;
  margin-left: -10px;
  margin-top: -10px;
  background-color: blue;
  position: absolute;
}

＆＃13;

<p>Click anywhere!</p>

＆＃13;

另请注意，如果您想拥有多个框，最好使用类而不是ID。 ID用于引用唯一元素，而类用于在多个元素之间共享。

如何让元素出现在鼠标点击javascript的地方

2 个答案: