Onclick在带有javascript坐标的主体更改div位置

Question

i just want to change div position onclick, when i click in the body i want div to appear there.

#elem{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    left: 150px;

}

var elem = document.getElementById("elem");
elem.onclick = funct;


function funct( event ){

     var x = event.clientX;
     var y = event.clientY;
        this.style.top = y + 'px';
        this.style.left = x + 'px';
}

Answer 1

Here's the working example. You need to add event listener to document/body element:

 var target = document.getElementById('target'); document.addEventListener('click', function (e) { target.style.left = e.clientX + 'px'; target.style.top = e.clientY + 'px'; }); 

 #target { width: 50px; height: 50px; background-color: #ccc; position: absolute; } 

 <div id="target"></div> 

You can expand the handler further and center the div on the cursor position as well:

 var target = document.getElementById('target'); document.addEventListener('click', function (e) { target.style.left = e.clientX - target.offsetWidth / 2 + 'px'; target.style.top = e.clientY - target.offsetHeight / 2 + 'px'; }); 

 #target { width: 50px; height: 50px; background-color: #ccc; position: absolute; } 

 <div id="target"></div>