Syntaxe
<element ng-mousemove="expression"></element>
|
Paramètres
Nom |
Description |
element |
Ce paramètre permet d'indiquer une balise. |
expression |
Ce paramètre permet d'indiquer une expression a exécuter quand le curseur de la souris passe sur un élément. |
Description
Cette directive permet d'indiquer qu'un comportement ou un événement doit être déclencher lorsqu'on la souris se déplace dans une zone spécifié.
Remarques
- Surveillance des mouvements de la souris : La directive ng-mousemove permet de détecter les mouvements de la souris sur un élément
HTML. Elle déclenche une fonction à chaque déplacement, ce qui peut être utilisé pour des applications interactives comme les
jeux ou les visualisations.
- Fonctionnement continu : Contrairement à ng-mouseenter ou ng-mouseleave, ng-mousemove se déclenche en continu tant que la souris bouge à
l'intérieur de l'élément ciblé. Cela signifie qu'elle peut générer un grand nombre d'événements en très peu de temps.
- Utilisation pour le suivi de la position : Elle est utile pour suivre la position exacte du curseur dans un élément. En capturant les coordonnées de l'événement
($event), il est possible de créer des effets dynamiques comme des animations suivant le curseur.
- Consommation des ressources : Comme la directive génère de nombreux événements par seconde, elle peut affecter les performances de l'application si le code
exécuté est lourd ou si elle est utilisée sur un grand nombre d'éléments.
- Applications créatives : ng-mousemove peut être utilisée pour des applications créatives telles que des effets de survol interactifs, des tableaux de
dessin ou des interfaces utilisateurs immersives, où chaque mouvement de la souris a une conséquence visuelle.
- Sensibilité à la zone de l'élément : Elle se limite à l'élément auquel elle est appliquée. Si la souris quitte cet élément, les événements ng-mousemove
cessent immédiatement, ce qui permet un contrôle précis de la zone d'interaction.
- Couplage avec les autres événements de souris : Pour des expériences plus complexes, ng-mousemove est souvent combinée avec des directives comme
ng-mousedown ou ng-mouseup. Par exemple, ces combinaisons permettent de suivre la souris uniquement lorsque le bouton est enfoncé.
- Limitations sur les appareils tactiles : Tout comme ng-mouseleave, la directive ng-mousemove repose sur des événements spécifiques à la souris. Sur
les appareils tactiles, ces événements ne sont pas générés, nécessitant des alternatives comme ng-touchmove ou des bibliothèques tierces.
Dernière mise à jour : Dimanche, le 9 décembre 2018