How to solve _javascript skills in mouseover and mouseout multiple triggering problems in JS

Problem description

I hope when the mouse moves to the ID1, the ID2 shows that when the mouse leaves ID1, id2 display. The questions are as follows:

1. When the mouse moves from the id1 to the ID2, the ID is changed from display to no display, and then to display

2. When the mouse moves from the id2 to the ID1, the ID2 display becomes not displayed, and then becomes the display

What I hope is that when the mouse moves on the ID1 or ID2, the ID2 is always displayed and does not change.

<script type= "Text/javascript" src= "https://code.jquery.com/jquery-1.12.4.js" ></script>
<div Id= "Id1" style= "width:800px; height:400px; Background-color: #F23 ">
<div id=" Id2 "style=" width:400px; height:300px: #0F8; display: none; " >
</div>
</div>
<script type= "Text/javascript" >
$ ("#id1"). MouseOver ( function () {
$ (this). Children (). FadeIn (1000);
}). Mouseout (function () {
$ (this). Children (). fadeout (1000);
});
</script>

Problem Solving method

At the beginning of the problem analysis, when the mouse moved from the ID1 to the ID2, because the mouse from id2 left into the id1, for ID1 triggered a mouseout event, so Id2 have a display to not show, and then the mouse to move to the ID2, A mouseover event is triggered on the id2, and because of the bubbling mechanism, the ID1 event on the ID1 is triggered before the mouseover bubbling to mouseover on the Id2, and then ID2 is changed to display by the display. Similarly, when the mouse moved from the id2 to the ID1, for Id2, triggered a mouseout event, or because of the bubbling mechanism, mouseout events to Id1, Id2 from the display to not show, and then the mouse moved to ID1 before, A mouseover event is triggered and Id2 is displayed.

It seems that the problem in the final solution is to stop the ID1 mouseout event when the mouse moves from the id1 to the Id2, and to block Id2 ID1 events from bubbling to Id2 when the mouse moves from the mouseout to the ID1. So just by stopping bubbles is not going to solve the problem.

To solve this problem, jquery provides the MouseEnter and MouseLeave methods. So the JS code to read as follows, very good solution to the problem.

$ ("#id1"). MouseEnter (function () {
$ (this). Children (). FadeIn (1000);
}). MouseLeave (function () {
$ (this). Children (). fadeout (1000);
});

Many places have introduced MouseEnter, MouseLeave and MouseOver, mouseout, so copy and paste one.

/*********************************************************/

1.mouseover and MouseEnter

The MouseOver event is triggered regardless of whether the mouse pointer crosses the selected element or its child elements.

The MouseEnter event is triggered only when the mouse pointer crosses the selected element.

2.mouseout and MouseLeave

The Mouseout event is triggered regardless of whether the mouse pointer leaves the selected element or any child elements.
The MouseLeave event is triggered only when the mouse pointer leaves the selected element.

/*********************************************************/

The phenomenon is indeed the phenomenon, but the process is a little vague, my understanding is as follows:

When the mouse pointer moves to the selected element, the MouseOver event is triggered, which is known to all, when the mouse pointer is moved by the selected element to its child element, first triggering the Mouseout event of the selected element, and then the MouseOver event of the child element bubbles to the selected element. This is the equivalent of the selected element performing a mouseout event first, and then executing a mouseover event.

To verify that the code is changed to the following

<script type= "Text/javascript" src= "https://code.jquery.com/jquery-1.12.4.js" ></script>
<div Id= "Id1" style= "width:800px; height:400px; Background-color: #F23 ">
<div id=" Id2 "style=" width:400px; height:300px: #0F8; Background-color: absolute; top:300px; " >
</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 ');
});
</script>

The mouse moves from the page to the ID1, and then from the ID1 to the ID2, the console outputs the following figure

It can be seen that ID1 has called the mouseover, Mouseout, mouseover events, exactly the same as the above analysis.

MouseEnter and MouseLeave Implementation analysis

Principle Analysis

From the above analysis, we can see that to achieve the effect of MouseEnter and MouseLeave, is when the mouse from the selected elements moved to its child elements, the selected elements do not perform mouseout events, and do not perform the mouseover events bubbling over the child, When the mouse moves from the selected element child element to the selected element, the selected element does not perform the MouseOver event or the Mouseout event bubbling over the subclass.

To achieve the effect above, we need an attribute Relatedtarget of the event object, which is the attribute used to determine the associated node of the mouseover and Mouseout event target nodes. Simply put, when the MouseOver event is triggered, the Relatedtarget attribute represents the node where the mouse has just left, and when the Mouseout event is triggered it represents the object that the mouse is moving toward. Because MSIE does not support this property, it has an alternative attribute, namely, fromelement and toelement. In addition, we need a contains method to determine whether an object is contained in another object.

So when the mouse moves, you need to judge the following two

1. Call MouseOver, just to determine whether Relatedtarget is selected element's child element, if it is, do not execute (when moving from the selected element child element to the selected element, do not perform mouseover; When moving from the selected element to the selected element child element, Do not perform bubbling over the mouseover);

2. Call Mouseout, just to determine whether Relatedtarget is a child of the selected element, and if so, not to execute (when moving from a selected element child element to a selected element, without performing a mouseout bubbling from a child element; When moving from a selected element to a child element of a selected element, Non-performing mouseover);

Implementation process

To determine whether a two element has an inclusive relationship

jquery encapsulates the contains function as follows

Can be simplified as follows

Determine if the two A contains B
function contains (a,b) {return
a.contains? A!= b && a.contains (b):!! (A.comparedocumentposition (b) &);
}

Comparedocumentposition Introduction

This method is part of the DOM Level 3 specification, allowing you to determine the position of each other between 2 Dom Node. This method is stronger than. Contains (). One possible application of this method is to sort DOM Node into a detailed and precise order. The information returned by Nodea.comparedocumentposition (NodeB) is described as follows:

Bit ordinal meaning

Through the above we can understand why write A.comparedocumentposition (b) & 16 Because if node A contains node B, it returns 16,16&16=1, and the other results will be 0.

Get Compatibility Relatedtarget

In order to be compatible with various browsers, refer to the jquery source, write the following code, to obtain the MouseOver and Mouseout event target node's associated node's attribute Relatedtarget.

function getrelated (e) {
var related;
var type=e.type.tolowercase ()//Here Gets the event name
if (type== ' mouseover ') {
related=e.relatedtarget| | E.fromelement
}else if (type= ' mouseout ') {
related=e.relatedtarget| | E.toelement
} return
related 
}

Improved MouseOver and Mouseout

Improve mouseover and mouseout to achieve improved mouseenter and mouseleave effects, all code below.

<! DOCTYPE html>  

Test, the mouse moves the route as follows diagram route

It can be seen from the console that at the moment the mouseover and mouseout have full mouseenter and mouseleave effect.

Encapsulation of code

If you need to load jquery or write a lot of delegates every time you do this, it's going to be tedious, for the sake of later operation, the proper encapsulation, the simulation of jquery, and the generation of your own MouseEnter and MouseLeave. The code is encapsulated in the Dqmouse.js file as follows:

(function (w) {var dqmouse = function (obj) {//function body return to new dqMouse.fn.init (obj);} Dqmouse.fn = Dqmouse.prototype = { Extended prototype Object Obj:null, Dqmouse: "1.0.0", init:function (obj) {this.obj=obj; return this;}, Contains:function (a,b) {return A.contains? A!= b && a.contains (b):!!
(A.comparedocumentposition (b) & 16); }, Getrelated:function (e) {var related; var type=e.type.tolowercase ();//Here Gets the event name if (type== ' mouseover ') {related= e.relatedtarget| | E.fromelement}else if (type= ' mouseout ') {related=e.relatedtarget| | 
E.toelement} return related; 
}, Over:function (FN) {var obj=this.obj; var _self=this; Obj.onmouseover=function (e) {var related=_self.getrelated (e);
if (this!=related &&!_self.contains (this,related)) {fn ();}}
return _self; 
}, Out:function (FN) {var obj=this.obj; var _self=this; Obj.onmouseout=function (e) {var related=_self.getrelated (e);
if (obj!=related &&!_self.contains (obj,related)) {fn ();}}
return _self; }} DqMouse.fn.init.prototype = DqmoUse.fn;
Window.dqmouse = window.$$= Dqmouse; }) (window);

The source file for the call is as follows:

<div id= "Id1" style= "width:800px; height:400px; Background-color: #F23 ">
<div id=" Id2 "style=" width:400px; height:300px: #0F8; Background-color: absolute; top:300px; " >
</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>

The above is a small set of JS to introduce MouseOver and mouseout many times to trigger the problem how to solve the relevant content, I hope to help you!