Je veux une fonction qui me dise sur quel élément se trouve le curseur de la souris.
Ainsi, par exemple, si la souris de l'utilisateur se trouve sur cette zone de texte (avec id wmd-input ), en appelant window.which_element_is_the_mouse_on() sera fonctionnellement équivalent à $("#wmd-input") .
Il y a une fonction vraiment cool appelée document.elementFromPoint qui fait ce qu'il semble faire.
Ce dont nous avons besoin, c'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);
C'est ce à quoi j'ai pensé aussi, mais je ne savais pas que elementFromPoint (et je n'ai pas pris la peine de regarder :)). C'est une fonction intéressante. Est-elle supportée par tous les principaux navigateurs ?
Génial. Cela fonctionne également sur Chrome (au moins 16 sous Linux). Et je ne m'intéresse pas vraiment à Safari, mais il fonctionne probablement là aussi.
Dans les navigateurs plus récents, vous pouvez procéder comme suit :
document.querySelectorAll( ":hover" );Cela vous donnera une NodeList des éléments sur lesquels la souris se trouve actuellement, dans l'ordre des documents. Le dernier élément de la NodeList est le plus spécifique, chaque élément précédent doit être un parent, un grand-parent, et ainsi de suite.
Cela n'a pas semblé fonctionner pendant que je traînais un <li> alors que sur d'autres <li> éléments.
J'ai créé un violon avec $(':hover') mais c'est à peu près la même chose : jsfiddle.net/pmrotule/2pks4tf6
Les événements de survol de la souris font des bulles. Vous pouvez donc placer un seul écouteur sur le corps et attendre qu'ils fassent des bulles, puis saisir l'événement de survol de la souris. 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));">
<!-- 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. -->
Je m'excuse de la mauvaise manière dont vous avez été traité dans votre question (maintenant supprimée). Personnellement, je préférerais que la question ne soit pas supprimée. Alors qu'elle était sur le point d'être fermée (injustement, à mon avis), j'avais l'intention de voter pour sa réouverture. Cependant, étant donné le nombre de votes négatifs, je comprendrais que vous choisissiez de la garder supprimée.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
