Me gustaría saber si hay alguna forma de obtener el elemento sobre el que se desplaza el mouse al presionar cualquier tecla.
No parecía encontrar nada de eso. ¡Gracias!
Hay un trabajo semi bueno al combinar dos eventos.
Primero necesita el evento mousemove en la ventana para rastrear la posición del cursor:
window.addEventListener('mousemove', (e) => { window.pos = [e.clientX, e.clientY]; // here we just save the last cursor position inside the window object in a new property, so we can access it globally })Entonces necesitaremos otro Event Listener para activar un evento de teclado, como keydown:
window.addEventListener('keydown', () => { // using the elementFromPoint method to determine what the element is under the cursor, by accessing our saved position console.log(document.elementFromPoint(window.pos[0], window.pos[1])) }); Esto en combinación funciona bien, pero no sé cuál es el soporte del navegador para el método elementFromPoint(x,y)
Pruebe esto en lugar de eventos de Windows:
var positionHovered = [] document.addEventListener('mousemove', (e) => { positionHovered = [e.clientX, e.clientY]; }) document.addEventListener('keydown', () => { console.clear(); console.log(document.elementFromPoint(positionHovered[0], positionHovered[1]).id); }); div{ border: 1px solid black; padding: 20px; text-align: center; margin: 5px; } div:hover{ background-color: #dedede; } <div id="1">1</div> <div id="2">2</div> <div id="3">3</div>Puede agregar el evento mouseover a los elementos sobre los que desea pasar el mouse y luego agregar el detector de eventos keydown para llamar a una función personalizada. En esa función, puede usar un selector de consulta para obtener el elemento sobre el que se encuentra y usarlo en su código. Luego puede eliminar el detector de eventos keydown en mouseout .
window.focus(); document.querySelectorAll(`.hover-div`).forEach(elmnt => { elmnt.addEventListener(`mouseover`, (event) => { document.addEventListener(`keydown`, logElement) }); elmnt.addEventListener(`mouseout`, (event) => { console.clear(); document.removeEventListener(`keydown`, logElement) }) }); function logElement() { const elem = document.querySelector(`.hover-div:hover`); console.log(elem.outerHTML) } body { background: #e2e1e0; } div.container div { background: white; padding: 25px; margin: 15px; display: inline-block; border: 1px solid black; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } .hover-div:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } <div class="container"> <div class="hover-div" title="div-1">1</div> <div class="hover-div" title="div-2">2</div> <div class="hover-div" title="div-3">3</div> </div>