JavaScript and jquery mouse mouse event bubbling handling _javascript Tips

Simple Mouse Movement Events:

Enter

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

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

Copy Code code as follows:

<! DOCTYPE html><div class= "Out Overout" style= "width:40%;height:120px"; margin:0 15px;background-color: #D6EDFC; float:left; "Data-mce-style=" width:40%; height:120px; Margin:0 15px; Background-color: #d6edfc; Float:left; " ><p style= "border:1px solid Red" data-mce-style= "border:1px solid red;" > External child element </p><div class= "in Overout" style= "Width:60%;background-color: #FFCC00; margin:10px auto;" Data-mce-style= "width:60%; Background-color: #ffcc00; margin:10px auto; " ><p style= "border:1px solid Red" data-mce-style= "border:1px solid red;" > Inner child element </p><p id= "Inshow" >0</p>
</div><p id= "Outshow" >0</p>
</div><script type= "Text/javascript" >

var i = 0;
var k = 0;

Document.queryselectorall ('. Out ') [0].addeventlistener (' mouseout '), function (e) {
Document.queryselectorall ("#inshow") [0].textcontent = (++i)
E.stoppropagation ();
},false)

Document.queryselectorall ('. in ') [0].addeventlistener (' mouseout '), function () {
Document.queryselectorall ("#outshow") [0].textcontent = (++k)
},false)

</script>

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;
}
};
});