jqery mouseout fires an extra (incorrect) time after leaving the element
$('#myid ').mouseout(function()
{
$('.myelement').remove();
});
for example, if the cursor is on an element. mouseover fired on it.
Then the cursor moves onto a child... And it turns out that mouseout occurs on the parent element at that moment! As if the cursor had left it, although it merely moved onto a descendant.
This happens because the mouse cursor can only be over one element - the deepest one in the DOM (and the topmost by z-index).
So if it moved onto a descendant, it means it left the parent.
for this, use the properties
mouseenter/mouseleavewhich are analogous to
mouseover/mouseout
The events
mouseenter/mouseleave are similar to mouseover/mouseout. They also fire when the cursor enters an element and leaves it, but with two differences.
When moving onto a descendant, the cursor does not leave the parent.
The cursor enters the element - mouseenter fires, and then, no matter where it moves inside it, mouseleave will occur when the cursor ends up outside the element.
$(document).on('mouseleave', '#myid, function() {
$('.my').remove();
});
Comments