Javascript Girl
  1. Javascript Girl
  3. Déterminez à quel élément le pointeur de la souris se trouve en haut de Javascript
Intereting Posts
Changer le contenu DIV en utilisant ajax, php et jQuery Impossible de vérifier runtime.lastError pendant browserAction.setBadgeText JQuery ou JavaScript strstr Dessiner des lignes lisses avec un canevas Pourquoi beaucoup de sites minimisent CSS et JavaScript mais pas HTML? Comprendre l'héritage prototypique en JavaScript Résultat de mon code Les filtres font problème avec Angular Comment enregistrer une image à partir d'un canevas Pourquoi utiliser un prototype lorsque nous pouvons simplement ajouter une propriété Décoder les entités HTML en JavaScript? Sélecteur de classe pas dans jQuery ActionScript 3 appelle une fonction javascript Obtenez l'url parent de l'iframe en PHP Array avec le tri d'objet avec Underscore sortBy

Déterminez à quel élément le pointeur de la souris se trouve en haut de Javascript

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

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

DEMO

Il existe une fonction très cool appelée document.elementFromPoint qui fait ce que cela ressemble.

Ce dont nous avons besoin, c'est de trouver les coeurs x et y de la souris, puis 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 les plus récents, vous pouvez effectuer les opérations suivantes: 

 document.querySelectorAll( ":hover" );

Cela vous donnera un NodeList of items que la souris est actuellement terminée dans l'ordre des documents. Le dernier élément dans la liste des nœuds est le plus spécifique, chaque précédent doit être un parent, un grand-parent, etc.

Bien que ce qui suit ne réponde pas à la question, car il s'agit du premier résultat du googling (le googler peut ne pas poser exactement la même question :), espérons qu'il fournira une contribution supplémentaire.

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

L'approche «structuelle» – 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 couvrent leurs ancêtres, ce qui est habituellement le cas, mais pas vrai en général, surtout lorsqu'il s'agit de SVG où l'élément dans différentes branches de l'arbre DOM peut 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 cacher temporairement (puisque nous le récupérons immédiatement dans le même contexte, le navigateur ne le rendra pas), puis continuez à trouver le deuxième élément le plus haut. .. On a l'air un peu piquante, mais il renvoie ce que vous attendez quand il y a, par exemple, des éléments de frères et sœurs dans un arbre qui s'obstruit. Veuillez trouver cette publication 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 rendements.

Passez le curseur sur la bulle des événements, afin que vous puissiez mettre un seul auditeur sur le corps et attendre qu'ils puissent faire des bulles, puis saisir le event.target ou event.srcElement : 

 function getTarget(event) { var el = event.target || event.srcElement; return el.nodeType == 1? el : el.parentNode; } <body onmouseover="doSomething(getTarget(event));">

Une solution possible pourrait être de lier un gestionnaire d'événements à tout : 

 var currentElement = null; $('body, body *').bind('mouseover', function(e) { // You might need to use .on(), too. if(e.target === e.currentTarget) { currentElement = $(this); } });

Si vous avez trop d'éléments sur votre page, cela pourrait ne pas être la meilleure idée. Et 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. -->

Vous pouvez utiliser ce sélecteur pour sous-traiter l'objet et le manipuler comme objet jquery. $(':hover').last();

La cible de l' mousemove DOM de mousemove 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 pas jQuery ou un setInterval.

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

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

elementFromPoint() obtient le premier élément dans l'arborescence DOM. Ce n'est surtout pas suffisant pour les besoins des développeurs. Par conséquent, il y a cette belle fonction: 

 Document.elementsFromPoint()

Cela renvoie un ensemble d'objets d'éléments sous les points donnés.

Il s'agit actuellement d'une fonctionnalité expérimentale qui n'est pas prise en charge par tous les navigateurs, donc vous pouvez utiliser cette réponse comme suite 

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

Plus d'informations et la compatibilité actuelle du navigateur ici: https://developer.mozilla.org/en-US/docs/Web/API/document/elementsFromPoint

Permettez-moi de commencer en disant que je ne recommande pas d'utiliser la méthode que je propose. Il est préférable d'utiliser le développement événementiel et de lier les événements uniquement aux éléments qui vous intéressent pour savoir si la souris est terminée avec mouseover , mouseout , mouseenter , mouseleave , etc.

Si vous devez absolument connaître l'élément sur lequel la souris est terminée, vous devriez écrire une fonction qui lie l'événement mouseover à tout dans le DOM, puis enregistrez n'importe quel élément actuel dans une certaine variable.

Vous pourriez faire 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_on chaque seconde et enregistre l'élément sur lequel la souris est actuellement window.which_element_is_the_mouse_on à la console.

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