JavaScript and jquery mouse mouse event bubbling

Source: Internet
Author: User

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:


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





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] = {



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;




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.