En parlant d’avoir un élément DIV, il y a un élément IMG et un SPAN à l’intérieur, ne vous inquiétez pas de la disposition de ces deux éléments internes, ce n’est pas le point dont je veux parler.
Pour obtenir des effets spéciaux, je dois utiliser les événements onmouseover et onmouseout de TD, et quand je les teste, je trouve la situation suivante :
Lorsque la souris se déplace à l’intérieur du DIV, l’événement onmouseover est déclenché ; Ensuite, déplacez la souris vers l’élément IMG ou SPAN à l’intérieur du DIV, nous ne pensons certainement pas que la souris ait été déplacée à l’extérieur du DIV, mais ce qui est étrange, c’est que l’événement onmouseout est déclenché, et l’événement onmouseover est aussi déclenché immédiatement.
Ce n’est pas ce que je veux, alors comment puis-je « bloquer » l’interférence des événements Javascrip{filtering}t apportés par des éléments internes vers des éléments externes ?
Voici deux méthodes :
1. setTimeout
Parce qu’après que la souris ait déplacé l’élément intérieur et déclenché l’événement onmouseout de l’élément extérieur, le onmouseover de l’élément extérieur sera également déclenché immédiatement, donc il suffit de retarder l’action que l’événement onmouseout de l’élément extérieur doit exécuter pendant une courte période pour s’exécuter, puis d’exécuter la méthode clearTimeout dans l’événement onmouseover, afin d’éviter l’interférence d’événement causée par l’élément interne.
Veuillez consulter la figure suivante pour le processus d’exécution spécifique (la ligne pointillée verticale représente le temps) :
C’est une approche astucieuse, car lorsque onmouseout est déclenché, la méthode substantielle n’est pas exécutée immédiatement, mais attend une courte période. Si l’événement onmouseover est déclenché immédiatement pendant ce temps, il est pratiquement certain que l’événement onmouseout est déclenché à cause d’interférences d’éléments internes, donc utilisez clearTimeout dans l’événement onmouseover pour empêcher l’exécution de la méthode retardée.
2. contient
Faites le jugement suivant lors de la surplace à la souris, puis exécutez le corps de la méthode lorsque le résultat est vrai :
Faites le jugement suivant lors de la sortie de la souris, puis exécutez le corps de la méthode lorsque le résultat est vrai :
Voici une explication de la signification des deux lignes de code ci-dessus :
Dans IE, tous les éléments HTML ont une méthode contain qui détermine si l’élément courant contient un élément spécifié. Nous utilisons cette méthode pour déterminer si un événement d’un élément extérieur est déclenché par un élément interne, et si un élément interne provoque un événement indésirable, alors nous ignorons cet événement.
event.fromElement pointe vers l’élément où la souris quitte la souris lorsque les événements onmouseover et onmouseout sont déclenchés ; event.toElement pointe vers l’élément dans lequel la souris entre lorsque les événements onmouseover et onmouseout sont déclenchés.
Ainsi, la signification des deux lignes de code ci-dessus est la suivante :
- Lorsque l’événement onmouseover est déclenché, il détermine si l’élément laissé par la souris est un élément interne de l’élément courant, et si oui, ignore cet événement ;
- Lorsque l’événement onmouseout est déclenché, on juge si l’élément entré par la souris est un élément interne de l’élément actuel, et si oui, ignorer cet événement ;
De cette façon, l’élément intérieur n’interfère pas avec les événements onmouseover et onmouseout de l’élément extérieur.
Mais le problème est encore une fois que les navigateurs non-IE ne supportent pas la fonction contain, mais maintenant que nous connaissons la fonction contain, nous pouvons ajouter le code suivant pour ajouter le code suivant afin d’ajouter le support contain pour les navigateurs non-IE :
Les méthodes ci-dessus ne sont pas compatibles avec Firefox :
Le point est jQuery :
jQueryUtilisez mouseleave au lieu de mouseout, de sorte que ce qui est dit ci-dessus ne se produise pas.
De plus, le surplomb de la souris sera déclenché à plusieurs reprises, il suffit d’utiliser mouseenter.
Solution parfaite~
|
Publié sur 17/12/2018 14:57:53
|
|
|
|
