mover - Determine en qué elemento se encuentra el puntero del mouse en Javascript

mover un div con el mouse javascript

Question

Quiero una función que me diga en qué elemento está el cursor del mouse.

Entonces, por ejemplo, si el mouse del usuario está sobre este textarea (con id wmd-input ), llamar a window.which_element_is_the_mouse_on() será funcionalmente equivalente a $("#wmd-input")

Answer 1

DEMO

Hay una función realmente genial llamada document.elementFromPoint que hace lo que parece.

Lo que necesitamos es encontrar los coords xey del mouse y luego llamarlo usando esos valores:

var x = event.clientX, y = event.clientY,
    elementMouseIsOver = document.elementFromPoint(x, y);

document.elementFromPoint

objeto de evento jQuery

Answer 2

Aunque los siguientes pueden no contestar la pregunta, ya que este es el primer resultado de googlear (es posible que el usuario no pregunte exactamente la misma pregunta :), espero que proporcione alguna información adicional.

En realidad, hay dos enfoques diferentes para obtener una lista de todos los elementos por los que actualmente se encuentra el mouse (para los navegadores más nuevos, tal vez):

El enfoque "structual" - árbol DOM ascendente

Como en la respuesta de Dherman, uno puede llamar

var elements = document.querySelectorAll('':hover'');

Sin embargo, esto supone que solo los niños se superpondrán a sus antepasados, lo cual es generalmente el caso, pero no es cierto en general, especialmente cuando se trata de SVG donde el elemento en diferentes ramas del árbol DOM puede superponerse entre sí.

El enfoque "visual" - Basado en la superposición "visual"

Este método utiliza document.elementFromPoint(x, y) para encontrar el elemento superior, ocultarlo temporalmente (ya que lo recuperamos inmediatamente en el mismo contexto, el navegador no lo renderizará) y luego buscar el segundo elemento superior. .. Parece un poco hacky, pero devuelve lo que esperas cuando hay, por ejemplo, elementos hermanos en un árbol ocluyéndose. Por favor encuentre esta publicación para más detalles,

function allElementsFromPoint(x, y) {
    var element, elements = [];
    var old_visibility = [];
    while (true) {
        element = document.elementFromPoint(x, y);
        if (!element || element === document.documentElement) {
            break;
        }
        elements.push(element);
        old_visibility.push(element.style.visibility);
        element.style.visibility = ''hidden''; // Temporarily hide the element (without changing the layout)
    }
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.visibility = old_visibility[k];
    }
    elements.reverse();
    return elements;
}

Pruebe ambos y compruebe sus diferentes devoluciones.

Answer 3

El objetivo del evento DOM de mousemove es el elemento DOM más elevado debajo del cursor cuando se mueve el mouse:

(function(){
    //Don''t fire multiple times in a row for the same element
    var prevTarget=null;
    document.addEventListener(''mousemove'', function(e) {
        //This will be the top-most DOM element under cursor
        var target=e.target;
        if(target!==prevTarget){
            console.log(target);
            prevTarget=target;
        }
    });
})();

Esto es similar a la solución de @Philip Walton, pero no requiere jQuery o setInterval.

Answer 4

El siguiente código te ayudará a obtener el elemento del puntero del mouse. Los elementos emitidos se mostrarán en la consola.

document.addEventListener(''mousemove'', function(e) {
    console.log(document.elementFromPoint(e.pageX, e.pageY)); 
})

Answer 5

En los navegadores más nuevos, podría hacer lo siguiente:

document.querySelectorAll( ":hover" );

Eso le dará una Lista de nodos de elementos que el mouse actualmente tiene en orden de documento. El último elemento en NodeList es el más específico, cada uno de los anteriores debe ser un padre, abuelo, y así sucesivamente.

Answer 6

Los eventos de mouseover burbujean, por lo que puedes poner un único oyente en el cuerpo y esperar a que event.target burbujas, luego toma el event.target o event.srcElement :

function getTarget(event) {
    var el = event.target || event.srcElement;
    return el.nodeType == 1? el : el.parentNode;
}

<body onmouseover="doSomething(getTarget(event));">

Answer 7

Permítanme comenzar diciendo que no recomiendo usar el método que estoy a punto de sugerir. Es mucho mejor usar un desarrollo basado en eventos y vincular eventos solo a los elementos que le interesan saber si el mouse ha terminado o no con mouseover , mouseout , mouseenter , mouseleave , etc.

Si absolutamente DEBE tener la capacidad de saber qué elemento es el mouse, necesitaría escribir una función que vincule el evento mouseover con todo en el DOM, y luego almacenar el elemento actual en alguna variable.

Podrías algo como esto:

window.which_element_is_the_mouse_on = (function() {

    var currentElement;

    $("body *").on(''mouseover'', function(e) {
        if(e.target === e.currentTarget) {
            currentElement = this;
        }
    });

    return function() {
        console.log(currentElement);    
    }
}());

Básicamente, he creado una función inmediata que establece el evento en todos los elementos y almacena el elemento actual dentro del cierre para minimizar su huella.

Aquí hay una demostración en funcionamiento que llama a window.which_element_is_the_mouse_on cada segundo y registra qué elemento está actualmente el mouse en la consola.

http://jsfiddle.net/LWFpJ/1/

Answer 8

Puede usar este selector para submovilizar un objeto y manipularlo como un objeto jquery. $('':hover'').last();

Answer 9

Puedes mirar el objetivo del evento mouseover en algún ancestro adecuado:

var currentElement = null;

document.addEventListener(''mouseover'', function (e) {
    currentElement = e.target;
});

Aquí hay una demostración.

Answer 10

elementFromPoint() obtiene el primer elemento en el árbol DOM. Esto no es suficiente para las necesidades de los desarrolladores. Por lo tanto, no hay esta buena función:

Document.elementsFromPoint()

Esto devuelve una matriz de objetos de elementos debajo de los puntos dados.

Actualmente es una característica experimental que no es compatible con todos los navegadores, por lo que puede usar share como alternativa

| Chrome | Firefox | IE   | Opera | Safari
| 43.0   | 46.0    | 10.0 | ?     | No support

Más información y compatibilidad actual del navegador aquí: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

Answer 11

<!-- One simple solution to your problem could be like this: -->

<div>
<input type="text" id="fname" onmousemove="javascript: alert(this.id);" />
<!-- OR -->
<input type="text" id="fname" onclick="javascript: alert(this.id);" />
</div>
<!-- Both mousemove over the field & click on the field displays "fname"-->
<!-- Works fantastic in IE, FireFox, Chrome, Opera. -->
<!-- I didn''t test it for Safari. -->