JavaScript and JQuery mouse event bubble Processing

JavaScript and JQuery mouse event bubble Processing

This article mainly introduces the mouse and mouse event bubbling processing of JavaScript and JQuery. This article summarizes some conclusions about the mouse event and provides the JavaScript and JQuery Test Code respectively, for more information, see

Simple mouse movement event:

Enter

The Code is as follows:

Mouseenter: Do not bubble

Mouseover: Bubble

The mouseover event is triggered no matter the mouse pointer passes through the selected element or its child element.

The mouseenter event is triggered only when the mouse pointer passes through the selected element.

Remove

The Code is as follows:

Mouseleave: Do not bubble

Mouseout: Bubble

The mouseout event is triggered no matter whether the mouse pointer leaves the selected element or any child element.

The mouseleave event is triggered only when the mouse pointer leaves the selected element.

Let's look at the problem through a case:

Bind a nested layer to a mouseout event, and you will find that the mouseout event is different from what you think.

The Code is as follows:

　　

External child element

Internal child element

0

 

　　

0

 

　　

 

We found a problematic mouseout event:

1. Bubble cannot be blocked

2. It will also be triggered on the internal child element

There is also a mouseover event, so how do we stop the bubble when the stopPropagation method fails?

1. To prevent repeated triggering of mouseover and mouseout, A relatedTarget attribute of the event object is used to determine the attributes of the relevant nodes 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. When the mouseout event is triggered, it represents the object where the mouse moves. MSIE does not support this attribute, but it has a substitute attribute, namely fromElement and toElement.

2. With this attribute, we can clearly know the object from which the mouse is moved and where it is to be moved. In this way, we can determine whether the associated object is inside the object where the event is to be triggered, or whether it is the object itself. Through this judgment, we can reasonably choose whether the event is to be triggered.

3. Here we also use the contains method to check whether an object is contained in another object. MSIE and FireFox provide the checking methods respectively. A function is encapsulated here.

JQuery's processing is exactly the same.

Copy the Code as follows:

JQuery. each ({

Mouseenter: "mouseover ",

Mouseleave: "mouseout ",

Pointerenter: "pointerover ",

Pointerleave: "pointerout"

}, Function (orig, fix ){

JQuery. event. special [orig] = {

DelegateType: fix,

BindType: fix,

Handle: function (event ){

Var ret,

Target = this,

Related = event. relatedTarget,

HandleObj = event. handleObj;

// For mousenter/leave call the handler if related is outside the target.

// NB: No relatedTarget if the mouse left/entered the browser window

If (! Related | (related! = Target &&! JQuery. contains (target, related ))){

Event. type = handleObj. origType;

Ret = handleObj. handler. apply (this, arguments );

Event. type = fix;

}

Return ret;

}

};

});