Je veux une fonction qui me dit sur quel élément se trouve le curseur de la souris.

Ainsi, par exemple, si la souris de l'utilisateur est sur cette zone de texte (avec id wmd-input), l'appel window.which_element_is_the_mouse_on()sera fonctionnellement équivalent à$("#wmd-input")

DEMO

Il y a une fonction vraiment cool appelée document.elementFromPointqui fait ce que cela ressemble.

Ce dont nous avons besoin est de trouver les coordonnées x et y de la souris, puis de l'appeler en utilisant ces valeurs:

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

document.elementFromPoint

Objet d'événement jQuery

Dans les navigateurs plus récents, vous pouvez effectuer les opérations suivantes:

document.querySelectorAll( ":hover" );

Cela vous donnera une liste de nœuds d'éléments sur lesquels la souris se trouve actuellement dans l'ordre du document. Le dernier élément de la liste de nœuds est le plus spécifique, chaque élément précédent doit être un parent, un grand-parent, etc.

Bien que ce qui suit ne réponde pas réellement à la question, puisqu'il s'agit du premier résultat d'une recherche sur Google (le googleur peut ne pas poser exactement la même question :), j'espère que cela fournira des informations supplémentaires.

Il existe en fait deux approches différentes pour obtenir une liste de tous les éléments sur lesquels la souris se trouve actuellement (pour les navigateurs plus récents, peut-être):

L'approche "structurelle" - Arbre DOM ascendant

Comme dans la réponse de Dherman, on peut appeler

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

Cependant, cela suppose que seuls les enfants superposeront leurs ancêtres, ce qui est généralement le cas, mais pas vrai en général, en particulier lorsqu'il s'agit de SVG où des éléments dans différentes branches de l'arborescence DOM peuvent se chevaucher.

L'approche «visuelle» - basée sur le chevauchement «visuel»

Cette méthode utilise document.elementFromPoint(x, y)pour trouver l'élément le plus haut, le masquer temporairement (puisque nous le récupérons immédiatement dans le même contexte, le navigateur ne le rendra pas réellement), puis continuez pour trouver le deuxième élément le plus haut ... Ça a l'air un peu hacky, mais il renvoie ce que vous attendez quand il y a, par exemple, des éléments frères dans un arbre qui s'occluent les uns les autres. Veuillez trouver cet article pour plus de détails,

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;
}

Essayez les deux et vérifiez leurs différents retours.

elementFromPoint()obtient uniquement le premier élément de l'arborescence DOM. Ce n'est généralement PAS suffisant pour les besoins des développeurs. Pour obtenir plus d'un élément, par exemple à la position actuelle du pointeur de la souris, voici la fonction dont vous avez besoin:

document.elementsFromPoint(x, y) . // mind the 's' in elements

Cela renvoie un tableau de tous les objets élément sous le point donné. Passez simplement les valeurs X et Y de la souris à cette fonction.

Plus d'informations ici: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

Pour les navigateurs très anciens qui ne sont pas pris en charge, vous pouvez utiliser cette réponse comme solution de secours.

Survolez la bulle des événements, vous pouvez donc placer un seul auditeur sur le corps et attendre qu'ils bouillonnent, puis saisissez le event.targetou event.srcElement:

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

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

Le code suivant vous aidera à obtenir l'élément du pointeur de la souris. Les éléments résultants s'afficheront dans la console.

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

Vous pouvez regarder la cible de l' mouseoverévénement sur un ancêtre approprié:

var currentElement = null;

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

Voici une démo.

<!-- 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 Déplacez votre souris dans la fenêtre de l'extrait de code: D

<script>
document.addEventListener('mouseover', function (e) {
	  console.log ("You are in ",e.target.tagName);
});
</script>

La cible de l' mousemoveévénement DOM est l'élément DOM le plus haut sous le curseur lorsque la souris se déplace:

(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;
        }
    });
})();

Ceci est similaire à la solution de @Philip Walton, mais ne nécessite ni jQuery ni setInterval.

Vous pouvez utiliser ce sélecteur pour saper l'objet et le manipuler en tant qu'objet jquery. $(':hover').last();

Permettez-moi de commencer en disant que je ne recommande pas d'utiliser la méthode que je suis sur le point de suggérer. Il est beaucoup mieux à l' événement l' utilisation du développement conduit et se lient uniquement les événements aux éléments que vous êtes intéressé à savoir si la souris ou non plus avec mouseover, mouseout, mouseenter, mouseleave, etc.

Si vous DEVEZ absolument avoir la capacité de savoir sur quel élément se trouve la souris, vous devez écrire une fonction qui lie l' mouseoverévénement à tout dans le DOM, puis stocker tout l'élément actuel dans une variable.

Vous pourriez donc quelque chose comme ça:

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);    
    }
}());

Fondamentalement, j'ai créé une fonction immédiate qui définit l'événement sur tous les éléments et stocke l'élément actuel dans la fermeture pour minimiser votre empreinte.

Voici une démo fonctionnelle qui appelle window.which_element_is_the_mouse_onchaque seconde et enregistre l'élément sur lequel la souris se trouve actuellement sur la console.

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

Ancienne question mais voici une solution pour ceux qui ont encore du mal. Vous souhaitez ajouter un mouseoverévénement sur l'élément «parent» du ou des éléments enfants que vous souhaitez détecter. Le code ci-dessous vous montre comment s'y prendre.

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)
});

DÉMO SUR CODEPEN