JavaScript and jquery mouse mouse event bubbling

This article mainly introduces JavaScript and jquery mouse mouse event bubbling, this article summarizes some of the findings of the mouse event, and gives the JavaScript and jquery test code, the need for friends can refer to the

Simple Mouse Movement Events:

Enter

The code is as follows:

MouseEnter: Not bubbling

MouseOver: Bubbling

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

Move out

The code is as follows:

MouseLeave: Not bubbling

Mouseout: Bubbling

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

We looked at the problem through a case study:

Binding mouseout events to a nested hierarchy will find that mouseout events are not the same as imagined

The code is as follows:

　　

External child elements

Inner child Element

0

　　

0

　　

We found a problem mouseout event:

1. Can't Stop bubbling

2. Also triggers on internal child elements

The same problem has mouseover events, so how do we stop bubbling when the Stoppropagation method fails?

1. To prevent repeated firings of mouseover and Mouseout, a property of the event object is used here Relatedtarget, 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.

2. With this attribute, we can clearly know which object our mouse is moving from, and where to move it. This allows us to determine whether the associated object is inside the object that we are triggering the event, or if it is the object itself. With this judgment we can reasonably choose whether to actually trigger the event.

3. Here we also use a method to check whether an object is contained in another object, contains method. MSIE and Firefox each provide a method of checking, which encapsulates a function.

The same is true with jquery.

Copy code 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;

}

};

});