He estado expuesto al evento OnMouseOver y al evento OnMouseOut en los últimos dos días. Siempre pensé que simplemente estaban activando eventos cuando el puntero del mouse se movía al elemento y activaba eventos cuando el puntero del mouse se movía fuera del objeto especificado. Pero de repente descubrí que estas son solo descripciones simples de ellos. Echemos un vistazo a ellos juntos después de todo, después de todo, todavía tienen características extrañas. ¿Es bueno o malo?
Primero implementa un cuadro:
Ate el evento OnMouseOver y el evento OnMouseOut en esta caja
Descubra que no les pasará nada, y luego (¡jeje, ya sabes!)
Creemos un elemento B, para que esté anidado en el elemento A como un elemento infantil de un
Todavía solo vinculamos el evento OnMouseOver y el evento OnMouseOut al elemento principal del padre A. ¿Qué descubrirá? ¡Sí, eso es correcto! Cuando el mouse se mueve y elimina el elemento B de los niños B de A, ¡el evento On Mouseover y el evento en MouseOut también se producen! ! ¿Por qué? ¡Esto no es lo que quiero! ¿B no es parte de A en este momento? Por supuesto que no, de lo contrario, el evento OnMouseOver no ocurrirá cuando se mueva el elemento B. Esto demuestra que el elemento B sigue siendo una parte integral de A.
Entonces, ¿qué está pasando? Después de todo, ¿el incidente está cometiendo un error? Todos saben que hay dos tipos de transmisiones de eventos en navegadores de uso común: burbujas de eventos y captura de eventos. Veamos la definición de burbujas de eventos: los eventos se propagan paso a paso desde el objetivo de evento más específico hasta el objetivo de evento menos específico (objeto de documento). Entonces, cuando el mouse se mueva y elimine el elemento infantil de A, el evento OnMouseOver de B y el evento On MouseOut se activarán, pero no tiene estos dos eventos, por lo que pasa estos dos eventos a su elemento principal A. A tiene estos dos eventos, por lo que la situación que vemos ocurre.
Algunas personas dirán cómo evitarlo. Después de todo, no todos tienen este tipo de demanda. Solo necesitamos que el evento del elemento principal se active, y deje que el elemento infantil sea silenciosamente un hombre guapo.
Entonces, W3C agrega atributos relacionados en eventos de mouseover y mouseout:
• En el evento Mouseover, indica de qué elemento proviene el mouse
• En el evento de ratón, apunta al elemento al que va el mouse
Sin embargo, Microsoft ha agregado dos atributos a los eventos de MouseOver y MouseOut
• DeLeLement, en el evento Mouseover, indica de qué elemento proviene el mouse
• Toelement, el elemento que apunta al mouse en el evento de ratón
Entonces tenemos la siguiente implementación del código
document.getElementById ('box1'). onMouseOver = function (e) {if (! e) e = window.event; var reltg = e.relatedTarget? e.relatedTarget: e.fromelement; while (reltg && reltg! = this) reltg = reltg.parentnode; if (reltg! = this) {// Aquí puede escribir el código de procesamiento para el eNmouseenter alert ('111');}} document.getElementById ('box1'). reltg = e.relatedTarget? e.relatedTarget: e.toelement; while (reltg && reltg! = this) reltg = reltg.parentnode; if (reltg! = this) {// Aquí puede escribir la alerta de código de procesamiento de eventos de OnMouseLeave ('2222');}}}}Lo anterior es una comprensión integral del incidente de On Mouseover y el incidente de On MouseOut presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!