Mouse mouse Event bubbling processing

Simple Mouse Movement Events:

Enter

MouseEnter: No bubbling mouseover: Bubbles trigger The MouseOver event whenever the mouse pointer crosses the selected element or its child elements the MouseEnter event is triggered only when the mouse pointer passes through the selected element

Move out

MouseLeave: No bubbling mouseout: Bubbles trigger The Mouseout event whenever 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:

Bind the Mouseout event to a nested hierarchy, and you will find that the Mouseout event is not the same as imagined

<! 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 elements </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 elements </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 with the Mouseout event:

1. Unable to prevent bubbling
2. is also triggered on the inner child element.

the same problem is the MouseOver event, so how do we stop bubbling when the Stoppropagation method fails?

• To prevent mouseover and mouseout from triggering repeatedly, a property of the event object Relatedtarget is used to determine the properties of the associated node of the mouseover and Mouseout event target nodes. In simple terms, when the MouseOver event is triggered, the Relatedtarget property represents the node that the mouse has just left, and when the Mouseout event is triggered it represents the object to which the mouse is moving. Since MSIE does not support this property, it has an alternative attribute, fromelement and toelement, respectively.
• With this attribute, we can clearly know which object our mouse is moving from and where it is going. This allows us to determine whether the associated object is inside the object we are triggering the event on, or if it is the object itself. With this judgment we can reasonably choose whether or not to actually trigger the event.
• Here we also use a method for checking whether an object is contained in another object, the contains method. MSIE and Firefox provide a way to check, which encapsulates a function.

The same is true with jquery.

Jquery.each ({mouseenter:"MouseOver", MouseLeave:"Mouseout", Pointerenter:"Pointerover", Pointerleave:"Pointerout"    }, function(orig, fix) {Jquery.event.special[orig]={delegatetype:fix, bindtype:fix, handle:function(event) {varret, 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; }                returnret;    }        }; });

Mouse mouse Event bubbling processing