Quiero una función que me diga sobre qué elemento está el cursor del mouse.
Entonces, por ejemplo, si el mouse del usuario está sobre este área de texto (con id wmd-input), la llamada window.which_element_is_the_mouse_on()será funcionalmente equivalente a$("#wmd-input")
Respuestas:
Hay una función realmente genial llamada document.elementFromPointque hace lo que parece.
Lo que necesitamos es encontrar las coordenadas xey del mouse y luego llamarlo usando esos valores:
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);event.targeto lo que sea
event.target?
eventes ni cómo llegó a ser
En los navegadores más nuevos, puede hacer lo siguiente:
document.querySelectorAll( ":hover" );Eso le dará una NodeList de elementos sobre los que el mouse está actualmente en el orden del documento. El último elemento de la NodeList es el más específico, cada uno de los anteriores debe ser un padre, un abuelo, etc.
<li>rato sobre otros <li>elementos.
(function(){ var q = document.querySelectorAll(":hover"); return q[q.length-1]; })()
mousemovepodría afectar el rendimiento
Aunque es posible que lo siguiente no responda realmente a la pregunta, ya que este es el primer resultado de la búsqueda en Google (es posible que el usuario no haga exactamente la misma pregunta :), espero que proporcione información adicional.
En realidad, hay dos enfoques diferentes para obtener una lista de todos los elementos sobre los que se encuentra actualmente el mouse (para los navegadores más nuevos, tal vez):
Como en la respuesta de Dherman, uno puede llamar
var elements = document.querySelectorAll(':hover');Sin embargo, esto supone que solo los hijos se superpondrán a sus antepasados, lo que suele ser el caso, pero no es cierto en general, especialmente cuando se trata de SVG, donde los elementos en diferentes ramas del árbol DOM pueden superponerse entre sí.
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á), luego busca el segundo elemento superior ... Parece un poco hacky, pero devuelve lo que espera cuando hay, por ejemplo, elementos hermanos en un árbol ocluyéndose entre sí. Encuentre esta publicación para obtener 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 rendimientos.
Document.elementsFromPoint(x, y) stackoverflow.com/a/31805883/1059828
elementFromPoint()obtiene solo el primer elemento en el árbol DOM. En su mayoría, esto NO es suficiente para las necesidades de los desarrolladores. Para obtener más de un elemento en, por ejemplo, la posición actual del puntero del mouse, esta es la función que necesita:
document.elementsFromPoint(x, y) . // mind the 's' in elementsEsto devuelve una matriz de todos los objetos de elemento bajo el punto dado. Simplemente pase los valores X e Y del mouse a esta función.
Más info aquí: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint
Para navegadores muy antiguos que no son compatibles, puede usar esta respuesta como alternativa.
La burbuja de eventos al pasar el mouse sobre el mouse, por lo que puede poner un solo oyente en el cuerpo y esperar a que aparezcan, luego agarre event.targeto event.srcElement:
function getTarget(event) {
var el = event.target || event.srcElement;
return el.nodeType == 1? el : el.parentNode;
}
<body onmouseover="doSomething(getTarget(event));">document.elementFromPoint(x, y).
El siguiente código le ayudará a obtener el elemento del puntero del mouse. Los elementos resultantes se mostrarán en la consola.
document.addEventListener('mousemove', function(e) {
console.log(document.elementFromPoint(e.pageX, e.pageY));
})e.clientXy en su e.clientYlugar (probado en Firefox 59).
Puede ver el objetivo del mouseoverevento en algún antepasado adecuado:
var currentElement = null;
document.addEventListener('mouseover', function (e) {
currentElement = e.target;
});<!-- 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. -->DEMO: D Mueva el mouse en la ventana del fragmento: D
<script>
document.addEventListener('mouseover', function (e) {
console.log ("You are in ",e.target.tagName);
});
</script>El objetivo del mousemoveevento DOM es el elemento DOM más alto 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.
Puede usar este selector para infravalorar el objeto y luego manipularlo como un objeto jquery. $(':hover').last();
Permítanme comenzar diciendo que no recomiendo usar el método que estoy a punto de sugerir. Es mucho mejor usar evento impulsado el desarrollo y se unen sólo los eventos a los elementos de los que está interesado en saber si el ratón está sobre con mouseover, mouseout, mouseenter, mouseleave, etc.
Si absolutamente DEBE tener la capacidad de saber en qué elemento está el mouse, necesitaría escribir una función que vincule el mouseoverevento a 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 funcional que llama window.which_element_is_the_mouse_on cada segundo y registra qué elemento se encuentra actualmente en la consola.
Pregunta vieja, pero aquí hay una solución para aquellos que todavía pueden estar luchando. Desea agregar un mouseoverevento en el elemento 'principal' de los elementos secundarios que desea detectar. El siguiente código le muestra cómo hacerlo.
const wrapper = document.getElementById('wrapper') //parent element
const position = document.getElementById("displaySelection")
wrapper.addEventListener('mousemove', function(e) {
let elementPointed = document.elementFromPoint(e.clientX, e.clientY)
console.log(elementPointed)
});