evetos raton

by Fabian Allel

HTML

<div id="cuadrado" style="background-color:blue; width:300px; height:300px;">
    <div id="cuadradoDentro" style="position:absolute;background-color:red; width:5px; height:5px;"></div>
    
</div>
<div id="cuadrado2" style="background-color:red; width:300px; height:300px;"></div>

JavaScript

var cuadrado= document.getElementById('cuadrado');
var cuadradoDentro= document.getElementById('cuadradoDentro');


cuadrado.onmousemove=function(evento){
    console.log('client X: '+evento.clientX);
    console.log('cliente Y: '+evento.clientY);
    console.log('screen X: '+evento.screenX);
    console.log('screen Y: '+evento.screenY);
    console.log('ctrlKey '+evento.ctrlKey);
    cuadradoDentro.style.top=evento.clientY+'px';
    cuadradoDentro.style.left=evento.clientX+'px';
};

cuadrado.onmouseover=function(evento){
    console.log(evento.relatedTarget);    
};