Description du problème
J'espère que lorsque la souris passera à ID1, ID2 sera affichée et lorsque la souris quittera ID1, ID2 sera affichée. Les questions sont les suivantes:
1.
2.
Ce que je veux, c'est que lorsque la souris se déplace sur ID1 ou ID2, ID2 continuera à apparaître sans changer.
<script type = "text / javascript" src = "https://code.jquery.com/jquery-1.12.4.js"> </ script> <div id = "id1"> <div id = "id2"> </ div> </ div> <script type = "text / javascript"> $ ("# id1"). MouseOver (function () {$ (this) .children (). fadein (1000);}). Mouseout (function () {$ (this) .children (). fadeout (1000);}); </ / script>.Problème de solution
L'analyse initiale du problème était que lorsque la souris est passée d'ID1 à ID2, la souris est partie de ID2 à ID1, et un événement de souris a été déclenché pour ID1, donc l'affichage d'ID2 est devenu non-dispositif. Ensuite, la souris est passée à ID2 et un événement Mouseover a été déclenché sur ID2. En raison du mécanisme de bulles, avant que le souris sur ID2 ne bouillonne à ID1, l'événement de la souris sur ID1 a été déclenché, puis ID2 est passé de non-diffusion à afficher. De même, lorsque la souris passe de ID2 à ID1, un événement de souris est déclenché pour ID2. Ou est-ce à cause du mécanisme de bulles que l'événement Mouseout est transmis à ID1, et ID2 passe de l'écran à la non-diffusion. Ensuite, avant que la souris ne passe à ID1, un événement MouseOver est déclenché, puis ID2 ne s'affiche pas pour afficher.
Il semble que le problème ci-dessus doit être résolu en bloquant la souris à partir de ID1 lorsque la souris passe de ID1 à ID2; Lorsque la souris se déplace d'ID2 à ID1, bloquant la souris à partir d'ID2 d'ID2 à ID1, empêchant la souris de ID2 de bouillonner ID1. Ensuite, le problème ne peut pas être résolu simplement en empêchant les bulles.
Pour résoudre de tels problèmes, jQuery fournit des méthodes de souris et de souris à souris. Ainsi, le code JS est modifié en ce qui suit, ce qui a très bien résolu le problème.
$ ("# id1"). MouseEnter (function () {$ (this) .children (). fadein (1000);}). Mouseleave (function () {$ (this) .children (). fadeout (1000);});De nombreux endroits présentent Mouseenter, Mouseleave, Mouseover et Mouseout, donc j'en ai copié et collé.
/ ****************************************************** /
1.Mouseover et Mouseenter
L'événement Mouseover est déclenché, que le pointeur de souris passe par l'élément sélectionné ou son élément enfant.
L'événement MouseEnter ne sera déclenché que lorsque le pointeur de la souris passe par l'élément sélectionné.
2.Mouse et Mouseleave
L'événement Mouseout sera déclenché, que le pointeur de souris quitte l'élément sélectionné ou tout élément enfant.
L'événement Mouseleave ne sera déclenché que lorsque le pointeur de la souris quitte l'élément sélectionné.
/ ****************************************************** /
Le phénomène est en effet ce phénomène, mais le processus est un peu vague. Ma compréhension est la suivante:
Lorsque le pointeur de la souris se déplace vers l'élément sélectionné, l'événement MouseOver sera déclenché. Tout le monde sait que lorsque le pointeur de la souris passe de l'élément sélectionné à son élément enfant, l'événement de souris de l'élément sélectionné sera déclenché en premier, puis l'événement MouseOver de l'élément enfant sera bouillonnant à l'élément sélectionné. À l'heure actuelle, il équivaut à l'élément sélectionné en train d'exécuter un événement Mouseout, puis à exécuter un événement MouseOver.
Pour vérification, passez le code à ce qui suit
<script type = "text / javascript" src = "https://code.jquery.com/jquery-1.12.4.js"> </ script> <div id = "id1"> <div id = "id2"> </ div> </ div> <script type = "text / javascript"> $ ("# id1"). MouseOver (function () {// $ (this) .children (). fadein (1000); console.log ('a');}). Mouseout (function () {// $ (this) .children ().Déplacez la souris de la page vers ID1, puis passez de l'ID1 à ID2, la sortie de la console est la suivante
On peut voir qu'ID1 a appelé les événements Mouseover, Mouseout et Mouseover, qui sont exactement les mêmes que celui analysé ci-dessus.
Analyse de mise en œuvre de MouseEnter et Mouseleave
Analyse principale
D'après l'analyse ci-dessus, nous pouvons voir que pour réaliser l'effet de MouseEnter et Mouseleave, lorsque la souris se déplace de l'élément sélectionné à son élément enfant, l'élément sélectionné n'exécute pas l'événement de souris, et il n'exécute pas l'événement de souris de souris que les bulles de la sous-classe. Lorsque la souris se déplace de l'élément d'élément sélectionné à l'élément sélectionné, l'élément sélectionné n'exécute pas l'événement MouseOver, ni l'exécution de l'événement Mouseout que la sous-classe bubbles.
Pour atteindre l'effet ci-dessus, nous avons besoin d'un attribut lié à cible de l'objet de l'événement, qui est utilisé pour juger les attributs des nœuds connexes des nœuds cibles de l'événement MouseOver et Mouseout. Autrement dit, lorsque l'événement MouseOver est déclenché, l'attribut RelatedTarget représente le nœud que la souris vient de quitter, et lorsque l'événement de souris est déclenché, il représente l'objet vers lequel la souris se déplace. Étant donné que MSIE ne prend pas en charge cette propriété, elle a substitué des propriétés, à savoir depuis la mise en place et les Toelement. De plus, nous avons également besoin de la méthode contient pour déterminer si un objet est contenu dans un autre objet.
De cette façon, lorsque la souris bouge, vous devez juger les deux suivants
1. Appelez Mouseover, vous n'avez qu'à déterminer si le RelatedTarget est un élément enfant de l'élément sélectionné. Si c'est le cas, il ne sera pas exécuté (lors du passage de l'élément d'élément sélectionné à l'élément sélectionné, MouseOver ne sera pas exécuté; lors du passage de l'élément sélectionné vers l'élément enfant sélectionné, MouseOver bubbled ne sera pas exécuté);
2. Appelez Mouseout, il vous suffit de déterminer si l'élément enfant du RelatedTarget est sélectionné. Si tel est le cas, il ne sera pas exécuté (lors du passage de l'élément d'élément sélectionné à l'élément sélectionné, l'élément de souris à partir de l'élément enfant n'est pas exécuté; lors du passage de l'élément sélectionné à l'élément enfant sélectionné, le mououseOver n'est pas exécuté);
Processus de mise en œuvre
Déterminez s'il existe une relation d'inclusion entre deux éléments
La fonction contient est encapsulée en jQuery comme suit
Il peut être simplifié comme suit
// juger si les deux A contient une bfonction contient (a, b) {return a.Contient? A! = B && A.ConTains (b): !! (A. CompareDocumentPosition (b) & 16);}Introduction à CompartifocumentPosition
Cette méthode fait partie de la spécification DOM niveau 3, vous permettant de déterminer la position mutuelle entre les 2 nœuds DOM. Cette méthode est plus puissante que .Contains (). Une application possible de cette méthode consiste à trier les nœuds DOM dans un ordre détaillé et précis. Les informations renvoyées par nodea.comparedocumentPosition (NodeB) sont décrites comme suit:
Bit Nombre Signification
Grâce à ce qui précède, nous pouvons comprendre pourquoi nous devons l'écrire en tant que A.ComparedocumentPosition (B) & 16 car si le nœud a contient le nœud B, 16 sera retourné, 16 et 16 = 1 sera retourné et les résultats seront 0 dans d'autres cas.
Obtenez RelatedTarget pour la compatibilité
Afin d'être compatible avec divers navigateurs, reportez-vous au code source jQuery, écrivez le code suivant pour obtenir les attributs liés liés à cible des nœuds cibles de l'événement MouseOver et Mouseout.
fonction getRelated (e) {var lié; var type = e.type.tolowercase (); // Obtenez le nom de l'événement ici if (type == 'MouseOver') {lié = e.relatedtarget || e.fromelement} else if (type = 'sourisout') {liked = e.relatedTarget || e.toilement} return liked; }Améliorer Mouseover et Mouseout
Améliorer la souris et la souris pour obtenir des effets améliorés de souris et de souris, tous les codes sont les suivants.
<! Doctype html> <html> <éad- head> <itle> </ title> </ head> <body> <div id = "id1"> <div id = "id2"> </ div> </ div> <script type = "text / javascript" src = "https://code.jquery.com/jquetery-1.12.4.js"> </ script> script> type = "text / javascript"> // juger si deux a contient bfonction contient (a, b) {return a.Contes? a! = b && a.Contains (b): !! (A.compareDocumentPosition (b) & 16);} fonction getRelated (e) {var liked; var type = e.type.tolowercase (); // Obtenez le nom de l'événement ici if (type == 'MouseOver') {lié = e.relatedTarget || e.fromelement} else if (type = 'muouseout') {lié = e.relatedTarget || e.toElement} return liked; } $ (function () {$ ("# id1"). MouseOver (function (e) {// défendez où la souris se déplace vers id1 var lien = getrelated (e); // si lié est l'élément enfant id2 de id1, c'est-à-dire qu'il se déplace de son élément enfant à son élément enfant, effectué if (this! = liked &&! contient (this, lié)) {console.log ('muouseOver');}}). Mouseout (function (e) {// juge où la souris doit se déplacer de id1? var lien = getrelated (e); // si lié est id1, qui est id1 de son élément enfant à id1, ou il est lié à id1 élément, aucune opération n'est effectuée, sinon l'opération correspondante est effectuée si (this! = liked &&! contient (this, lié)) {console.log ('sourisTest, route de mouvement de la souris comme indiqué dans le diagramme suivant
Comme on peut le voir dans la console, Mouseover et Mouseout en ce moment ont des effets de souris et de souris entièrement équipés.
Encapsulation du code
Si vous avez besoin de charger jQuery ou d'écrire de nombreux représentants chaque fois que vous effectuez une telle opération, ce sera une tâche fastidieuse. Afin de faciliter les opérations futures, un emballage approprié est effectué, simulé jQuery et générez votre propre souris et en moule. Le code est encapsulé dans le fichier dqmouse.js, comme suit:
(fonction (W) {var dqmouse = fonction (obj) {// Fonction Body return new DqMouse.fn.init (obj);} dqmouse.fn = dqmouse.protototype = {// prototype étendu obj: null, dqmouse: "1.0.0", init: function (obj) {this.oBj = obj; Ceci;}, contient: fonction (a, b) {return a.Conds? if (Type == 'MouseOver') {lié = e.relatedtarget || e.fromement} else if (type = 'muouseout') {lié = e.relatedtarget || e.to-element} return liked; lié = _self.getReled (e); ! _self.contains (obj, lié)) {fn ();}} return _self;}} dqmouse.fn.init.prototype = dqmouse.fn; window.dqmouse = window. $$ = dqmouse;}) (fenêtre);Le fichier source appelé est le suivant:
<div id = "id1"> <div id = "id2"> </ div> </ div> <script type = "text / javascrip id1 = document.getElementById ('id1'); $$ (id1) .over (function () {console.log ('muouseOver');}). out (function () {console.log ('mouseout');}); </cript>Ce qui précède est le contenu pertinent sur la façon de résoudre le problème de Mouseover et Mouseout déclenchant plusieurs fois dans JS que l'éditeur vous a présenté. J'espère que ce sera utile à tous!