wie Element an der Stelle erscheinen, wo Mausklicks in Javascript

Question

Ich möchte mit einer leeren Seite beginnen, und wenn der Benutzer (Maus) irgendwo auf der Seite klickt, wird ein Feld an dieser Stelle angezeigt.

Dies ist, was ich bisher habe, habe ich die Box ausgeblendet und änderte dann den Stil durch Hinzufügen eines Ereignis-Listeners, aber wie erstelle ich ein anderes Ereignis, das den Benutzer ermöglicht, irgendwo klicken, erscheint Box, klicken Sie dann erneut in a ein anderer Punkt und ein anderer Kasten erscheint an diesem Ort. - mit Vanille nur

Javascript

Vielen Dank im Voraus, hier ist mein HTML/CSS Code:

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

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

und Javascript-Code:

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

     }); 

Answer 1

Sie erhalten können offsetX/Y oder pageX/Y. Der Abstand ist relativ Element zum Ziel, Seite - relativ können

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

Answer 2

Sie verwenden zu dokumentieren event.pageX und event.pageY die Cursorposition relativ zu dem Dokument zu erhalten linke oberen Ecke. Versuchen Sie es unter:

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); 
 
}

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

<p>Click anywhere!</p>

Beachten Sie auch, dass, wenn Sie mehrere Boxen haben wollen, ist es am besten, eine Klasse zu verwenden, anstatt eine ID. Eine ID soll auf ein eindeutiges Element verweisen, während eine Klasse unter mehreren geteilt werden soll.