Hablando de tener un elemento DIV, hay un elemento IMG y un elemento SPAN dentro, no te preocupes por cómo están dispuestos estos dos elementos internos, este no es el punto que quiero discutir.
Para conseguir algunos efectos especiales, necesito usar los eventos onmouseover y onmouseout de TD, y cuando lo pruebe, encontraré la siguiente situación:
Cuando el ratón se mueve dentro del DIV, se activa el evento onmouseover; Luego mueve el ratón al elemento IMG o SPAN dentro del DIV; definitivamente no creemos que el ratón se haya movido hacia el exterior del DIV, pero lo curioso es que se activa el evento onmouseout, y el evento onmouseover también se activa inmediatamente.
Esto no es lo que quiero, así que ¿cómo puedo "bloquear" la interferencia de los eventos de Javascrip{filtering}t que traen los elementos internos a los externos?
Aquí tienes dos métodos:
1. setTimeout
Porque después de que el ratón se mueva sobre el elemento interior y desencadene el evento onmouseout del elemento exterior, el onmouseover del elemento exterior también se activará inmediatamente, por lo que solo necesitamos retrasar la acción que el evento onmouseout del elemento exterior debe ejecutar durante un corto periodo de tiempo para ejecutarse, y luego ejecutar el método clearTimeout en el evento onmouseover, para evitar la interferencia de evento causada por el elemento interno.
Por favor, consulte la siguiente figura para el proceso específico de ejecución (la línea de puntos vertical representa el tiempo):
Este es un enfoque ingenioso, porque cuando se activa onmouseout, el método sustantivo no se ejecuta inmediatamente, sino que espera un corto periodo de tiempo. Si el evento onmouseover se activa inmediatamente durante este tiempo, es básicamente seguro que el evento onmouseout se activa debido a interferencias de elementos internos, así que usa clearTimeout en el evento onmouseover para evitar que el método retardado se ejecute.
2. contiene
Haz el siguiente juicio al pasar el ratón y luego ejecuta el cuerpo del método cuando el resultado sea verdadero:
Haz el siguiente juicio cuando salgas con el ratón y luego ejecuta el cuerpo del método cuando el resultado sea verdadero:
Aquí tienes una explicación del significado de las dos líneas de código anteriores:
En IE, todos los elementos HTML tienen un método contain que determina si el elemento actual contiene un elemento especificado. Utilizamos este método para determinar si un evento de un elemento externo es desencadenado por un elemento interno, y si un elemento interno provoca un evento no deseado, entonces ignoramos este evento.
event.fromElement señala el elemento del que el ratón sale cuando se activan los eventos onmouseover y onmouseout; event.toElement señala el elemento al que el ratón entra cuando se activan los eventos onmouseover y onmouseout.
Así que el significado de las dos líneas de código anteriores es:
- Cuando se activa el evento onmouseover, determina si el elemento dejado por el ratón es un elemento interno del elemento actual y, en caso afirmativo, ignora este evento;
- Cuando se activa el evento onmouseout, juzgar si el elemento introducido por el ratón es un elemento interno del elemento actual y, de ser así, ignorar este evento;
De este modo, el elemento interior no interfiere con los eventos onmouseover y onmouseout del elemento exterior.
Pero el problema es que, de nuevo, los navegadores que no son IE no soportan la función contain, pero ahora que conocemos la función de contain, podemos añadir el siguiente código para añadir soporte de contain para navegadores que no son IE:
Los métodos anteriores no son compatibles con Firefox:
La cuestión es jQuery:
jQueryUsa mouseleave en vez de mouseout, para que lo dicho arriba no ocurra.
Además, el movimiento de ratón se activará repetidamente, solo usa mouseenter.
Solución perfecta~
|
Publicado en 17/12/2018 14:57:53
|
|
|
|
