J'ai été exposé à l'événement OnMouseover et à l'événement OnMouseout au cours des deux derniers jours. J'ai toujours pensé qu'ils déclenchaient simplement des événements lorsque le pointeur de la souris se déplaçait vers l'élément et déclenchait des événements lorsque le pointeur de la souris a quitté l'objet spécifié. Mais j'ai soudainement découvert que ce ne sont que de simples descriptions. Jetons un coup d'œil ensemble après tout, après tout, ils ont toujours des caractéristiques étranges. Est-ce bon ou mauvais?
Implémentez d'abord une boîte:
Lisez l'événement OnMouseOver et l'événement OnMouseout sur cette boîte
Découvrez que rien ne leur arrivera, puis (hehe, vous savez!)
Créons un élément B, de sorte qu'il est imbriqué dans l'élément A en tant qu'élément enfant d'un
Nous ne lions toujours que l'événement OnMouseOver et l'événement OnMouseout à l'élément parent extérieur A. Que découvrirez-vous? Oui, c'est vrai! Lorsque la souris emménage et supprime l'élément enfant B de A, l'événement OnMouseOver et l'événement OnMouseout se produisent également! ! Pourquoi? Ce n'est pas ce que je veux! B ne fait-il pas partie de A pour le moment? Bien sûr que non, sinon l'événement OnMouseOver ne se produira pas lorsque l'élément B sera déplacé. Cela prouve que l'élément B fait toujours partie intégrante de A.
Alors que se passe-t-il? Après tout, l'incident fait une erreur? Tout le monde sait qu'il existe deux types de flux d'événements dans les navigateurs couramment utilisés: les bulles d'événements et la capture d'événements. Examinons la définition des bulles d'événements: les événements se propagent étape par étape de la cible d'événement la plus spécifique à la cible d'événement la moins spécifique (objet de document). Ainsi, lorsque la souris emménage et supprime l'élément enfant de A, l'événement OnMouseOver de B et l'événement OnMouseout seront déclenchés, mais il n'a pas ces deux événements, il passe donc ces deux événements à son élément parent A. A a ces deux événements, donc la situation que nous voyons se produit.
Certaines personnes diront comment l'éviter. Après tout, tout le monde n'a pas ce genre de demande. Nous avons juste besoin de l'événement parent pour déclencher et de laisser l'élément enfant être tranquillement un bel homme.
Ainsi, W3C ajoute des attributs RelatedTarget dans les événements MouseOver et Mouseout:
• Dans l'événement Mouseover, il indique de quel élément la souris provient
• Dans l'événement Mouseout, il pointe vers l'élément auquel la souris va
Cependant, Microsoft a ajouté deux attributs aux événements Mouseover et Mouseout
• FromElement, dans l'événement Mouseover, indique de quel élément la souris provient
• Toelement, l'élément qui pointe vers la souris dans l'événement Mouseout
Nous avons donc l'implémentation du code suivant
document.getElementById ('box1'). onMouseOver = function (e) {if (! e) e = window.event; var reltg = e.relatedTarget? e.relatedtarget: e.fromement; while (reltg && reltg! = this) reltg = reltg.parentNode; if (reltg! = this) {// ici vous pouvez écrire le code de traitement pour l'événement onMouseEnter ('111');}} window.event; var reltg = e.relatedTarget? e.relatedTarget: e.toElement; while (reltg && reltg! = this) reltg = reltg.parentNode; if (reltg! = this) {// vous pouvez écrire le code de traitement d'événement OnMouseLeleave ('2222');}}Ce qui précède est une compréhension complète de l'incident d'OnmouseOver et de l'incident d'Onmouseout qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!