Descripción del problema
Espero que cuando el mouse se mueva a ID1, ID2 se muestre, y cuando el mouse deja ID1, se muestra ID2. Las preguntas son las siguientes:
1. Cuando el mouse se mueve de ID1 a ID2, la ID cambia de visualización a no mostrar, y luego cambia a mostrar
2. Cuando el mouse se mueve de ID2 a ID1, la visualización de ID2 se vuelve no exhibida y luego se vuelve
Lo que quiero es que cuando el mouse se mueva en ID1 o ID2, ID2 seguirá apareciendo sin cambiar.
<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>Solución de problemas
El análisis inicial del problema fue que cuando el mouse se movió de ID1 a ID2, el mouse se fue de ID2 a ID1, y se activó un evento de ratón para ID1, por lo que la visualización de ID2 se convirtió en sin visualización. Luego, el mouse se movió a ID2, y un evento de Mouseover se activó en ID2. Debido al mecanismo de burbujas, antes de que el rouseover en ID2 burbujee a ID1, se activó el evento Mouseover en ID1, y luego ID2 cambió de no mostrar a visualización. Del mismo modo, cuando el mouse se mueve de ID2 a ID1, se activa un evento de ratón para ID2. O es debido al mecanismo de burbujas que el evento de ratón se transmite a ID1, e ID2 cambia de visualización a sin muestra. Luego, antes de que el mouse se mueva a ID1, se activa un evento Mouseover, y luego ID2 no se muestra para mostrar.
Parece que el problema anterior debe resolverse bloqueando el mouse fuera de ID1 cuando el mouse se mueve de ID1 a ID2; Cuando el mouse se mueve de ID2 a ID1, bloquee el mouse fuera de ID2 de ID2 a ID1, evitando que el mouse fuera de ID2 burbujee por encima de ID1. Entonces el problema no se puede resolver simplemente evitando burbujas.
Para resolver tales problemas, jQuery proporciona métodos de mouseenter y mouseLeave. Entonces, el código JS se cambia a lo siguiente, que resolvió muy bien el problema.
$ ("#id1"). mouseenter (function () {$ (this) .children (). fadein (1000);}). mouseLeave (function () {$ (this) .children (). fadeout (1000);});Muchos lugares introducen mouseenter, mouseleave, mouseover y rouseut, así que copié y pegé uno.
/**************************************************
1. MouseOver y Mouseenter
El evento Mouseover se activa independientemente de si el puntero del mouse pasa a través del elemento seleccionado o su elemento hijo.
El evento Mouseenter solo se activará cuando el puntero del mouse pase a través del elemento seleccionado.
2.Museut y Mouseleve
El evento MouseOut se activará independientemente de si el puntero del mouse deja el elemento seleccionado o cualquier elemento infantil.
El evento Mouseleave solo se activará cuando el puntero del mouse deja el elemento seleccionado.
/**************************************************
El fenómeno es de hecho este fenómeno, pero el proceso es un poco vago. Mi comprensión es el siguiente:
Cuando el puntero del mouse se mueve al elemento seleccionado, el evento Mouseover se activará. Todos saben que cuando el puntero del mouse se mueve del elemento seleccionado a su elemento infantil, el evento MouseOut del elemento seleccionado se activará primero, y luego el evento MouseOver del elemento infantil se burbujeará al elemento seleccionado. En este momento, es equivalente al elemento seleccionado que primero ejecuta un evento MouseOut y luego ejecuta un evento de MouseOver.
Para la verificación, cambie el código a lo siguiente
<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 (). fadeOut (1000); console.log ('b');};Mueva el mouse de la página a ID1, luego pase de ID1 a ID2, la salida de la consola es la siguiente
Se puede ver que ID1 ha llamado eventos Mouseover, MouseOut y Mouseover, que son exactamente lo mismo que el analizado anteriormente.
Análisis de implementación de Mouseenter y Mouseleave
Análisis de principios
A partir del análisis anterior, podemos ver que para lograr el efecto del mouseenter y mouseLeave, cuando el mouse se mueve del elemento seleccionado a su elemento infantil, el elemento seleccionado no ejecuta el evento de mouseut, ni ejecuta el evento de mouseover que la subclase burbujea. Cuando el mouse se mueve del elemento del elemento seleccionado al elemento seleccionado, el elemento seleccionado no ejecuta el evento Mouseover, ni ejecuta el evento MouseOut que la subclase burbujea.
Para lograr el efecto anterior, necesitamos un atributo relacionado con el Target del objeto de evento, que se utiliza para juzgar los atributos de los nodos relacionados de los nodos objetivo de evento Mouseover y MouseOut. En pocas palabras, cuando se activa el evento Mouseover, el atributo de Target relacionado representa el nodo al que el mouse acaba de dejar, y cuando se activa el evento de ratón, representa el objeto al que se mueve el mouse. Dado que MSIE no admite esta propiedad, tiene propiedades sustituidas, a saber, desde elemento y el contenido de la demora. Además, también necesitamos el método contenido para determinar si un objeto está contenido en otro objeto.
De esta manera, cuando el mouse se mueve, debes juzgar a los dos siguientes
1. Llame a Mouseover, solo necesita determinar si el Target relacionado es un elemento infantil del elemento seleccionado. Si es así, no se ejecutará (cuando se mueva del elemento del elemento seleccionado al elemento seleccionado, el mouseover no se ejecutará; cuando se mueva del elemento seleccionado al elemento del elemento seleccionado, el mouseover burbujeante no se ejecutará);
2. Llame a MouseOut, solo necesita determinar si se selecciona el elemento infantil del Target relacionado. Si es así, no se ejecutará (cuando se mueva del elemento del elemento seleccionado al elemento seleccionado, el mouseut burbujeó desde el elemento infantil no se ejecuta; cuando se mueve del elemento seleccionado al elemento del elemento seleccionado, el ratón no se ejecuta);
Proceso de implementación
Determinar si hay una relación de inclusión entre dos elementos
La función contiene se encapsula en jQuery de la siguiente manera
Se puede simplificar de la siguiente manera
// juzga si los dos A contienen bfunction contiene (a, b) {return a.contains? a! = b && a.contains (b): !! (A.comparedocumentPosition (b) y 16);}Introducción a la posición de comparación comparada
Este método es parte de la especificación DOM Nivel 3, lo que le permite determinar la posición mutua entre los 2 nodos DOM. Este método es más poderoso que .contains (). Una posible aplicación de este método es clasificar los nodos DOM en un orden detallado y preciso. La información devuelta por Nodea.comParedOcumentPosition (NODEB) se describe de la siguiente manera:
Número de bits significado
A través de lo anterior podemos entender por qué debemos escribirlo como A.ComparedocumentPosition (b) y 16 porque si el nodo A contiene el nodo B, 16 se devolverá, 16 y 16 = 1 se devolverán, y los resultados serán 0 en otros casos.
Obtenga RelatedTarget para la compatibilidad
Para ser compatible con varios navegadores, consulte el código fuente de jQuery, escriba el siguiente código para obtener los atributos relacionados con los nodos de destino del evento MouseOver y MouseOut.
función getRelated (e) {var relacionada; var type = e.type.tolowerCase (); // Obtener el nombre del evento aquí if (type == 'Mouseover') {relacionado = e.relatedTarget || e.fromelement} más if (type = 'mouseout') {relacionado = e.RelatedTarget || e.toelement} regreso relacionado; }Mejorar el rouseover y el rouseut
Mejore el rouseover y el ratón para lograr los efectos mejorados de mouseenter y mouseleave, todos los códigos son los siguientes.
<! Doctype html> <html> <fead> <title> </title> </head> <body> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript" src = "https://code.jquery.com/jquery-1.12.4.js"> <script <script <script <script <script> <script <script <script> <script <script <script <script <script> <script <script> <script <script <script> <script <script <script <script> <script <script <script> <scripte type = "text/javaScript"> // juzga si dos a contiene bfunction contiene (a, b) {return a.contains? a! = b && a.contains (b): !! (a.compareDocumentPosition (b) & 16);} function getRelated (e) {var relacionado; var type = e.type.tolowercase (); // Obtenga el nombre del evento aquí si (type == 'ruseoover') {relacionado = e.elatedTarget || e.fromelement} if (type = 'mouseout') {related = e.relatedTarget || e.toelement} return Related; } $ (function () {$ ("#id1"). mouseover (function (e) {// defender donde el mouse se mueve a id1 var relacionado = getRelated (e); // Si relacionado es el elemento infantil id2 de id1, es decir, se mueve desde el elemento infantil ID2 a ID1, o se relaciona con ID1, es decir, es una operación de Operación, de lo contrario, no se realiza la operación de la operación, no se realiza la operación de la operación, no se realiza la operación de la operación, no es una operación, no es una operación, no se relaciona con la operación de la operación, no se relaciona con la operación de la operación de la Operación de ID1, no es relacionado. performed if(this!=related && !contains(this, related)){console.log('mouseover');}}).mouseout(function(e){//Judge where the mouse should move from id1? var related=getRelated(e); //If related is id1, that is, when id1 moves from its child element to id1, or it is related to id2, that is, it moves from id1 to its child El elemento, no se realiza ninguna operación, de lo contrario la operación correspondiente se realiza si (this! = Related &&! Contiene (this, Related)) {console.log ('Mouseout');}});}); </script> </body> </html>Prueba, ruta del movimiento del mouse como se muestra en el siguiente diagrama
Como se puede ver en la consola, Mouseover y MouseOut en este momento tienen efectos de mouseenter y mouseave totalmente equipados.
Encapsulación del código
Si necesita cargar jQuery o escribir muchos representantes cada vez que realice una operación de este tipo, será una tarea tediosa. Para facilitar las operaciones futuras, se lleva a cabo el embalaje apropiado, se simula JQuery y genere su propio mouseenter y mouseave. El código está encapsulado en el archivo dqmouse.js, como sigue:
(función (w) {var dqMouse = function (obj) {// function Body return New dqMouse.fn.init (obj);} dqMouse.fn = dqMouse.Prototype = {// Extended Prototype Obj: Null, DqMouse: "1.0.0", init: function (obj) {this.obj = obj; esto;}, contiene: función (a, b) {return a.contains? if (type == 'Mouseover') {Related = E.RelatedTarget || Relation = _Self.getRelated (e); ! _self.contains (obj, relatado)) {fn ();}} return _Self;}} dqmouse.fn.init.prototype = dqmouse.fn; window.dqmouse = window. $$ = dqmouse;}) (ventana);El archivo fuente llamado es el siguiente:
<div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript" src = "dqmouse.js"> </script> <script type = "text/javaScript> var id1 = document.getElementById ('id1'); $$ (id1) .over (function () {console.log ('mouseover');}). out (function () {console.log ('mouseout');}); </script>Lo anterior es el contenido relevante sobre cómo resolver el problema de MouseOver y MouseOut activación varias veces en JS que el editor le presentó. ¡Espero que sea útil para todos!