Syntaxe
<element ng-mouseleave="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 sort d'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 met à sortir d'une zone spécifié.
Remarques
- Gestion des événements de la souris : La directive ng-mouseleave permet de détecter l'événement lorsqu'une souris quitte une zone ou un élément
HTML. Cela est utile pour réagir à des interactions utilisateur précises, comme masquer un menu ou réinitialiser des styles
dynamiques.
- Association avec une fonction du contrôleur : Elle fonctionne en associant un événement à une méthode définie dans le contrôleur AngularJS. Par exemple,
ng-mouseleave="onMouseLeave()" appellera la méthode onMouseLeave chaque fois que l'événement se produit.
- Différence avec ng-mouseout : Contrairement à ng-mouseout, ng-mouseleave ne se déclenche pas lorsqu'un élément enfant est quitté, mais uniquement
lorsque la souris quitte complètement l'élément parent. Cela évite des comportements indésirables dans des structures imbriquées.
- Utilisation dans des animations : ng-mouseleave est souvent utilisée pour déclencher des animations CSS ou
des modifications de classes lorsqu'un utilisateur sort d'un élément interactif, par exemple, pour faire disparaître un effet survol.
- Facilité d'intégration : Cette directive est facile à intégrer dans des projets AngularJS, car elle s'insère directement dans le
HTML sans nécessiter de configuration complexe, rendant le code plus lisible.
- Performances : Bien que pratique, son utilisation répétée sur de nombreux éléments de la page peut impacter les performances, surtout si elle est associée à
des opérations lourdes côté contrôleur.
- Comportement sur des appareils tactiles : La directive repose sur l'événement de la souris et peut ne pas fonctionner comme prévu sur des appareils tactiles.
Il est important de tester et d'adapter les comportements pour garantir une bonne expérience utilisateur sur ces plateformes.
- Couplage avec des directives complémentaires : ng-mouseleave est souvent utilisée en combinaison avec d'autres directives comme ng-mouseenter ou
ng-click pour créer des interactions riches et fluides. Par exemple, ng-mouseenter pourrait afficher un élément, tandis que ng-mouseleave le cacherait.
Dernière mise à jour : Dimanche, le 9 décembre 2018
