Question

I have the following code:

area = document.createElement('div');
drag = document.createElement('div');
body.appendChild(area);
area.appendChild(drag);

area.onmouseover = function () {
    console.log('entered');
}
area.onmouseout = function () {
    console.log('leaved');
}

The problem is that when mouse goes over the child drag it counts as enter and leave!

Preview:
http://s12.postimage.org/xopqous19/preview.gif

Answer 1

Use onmouseenter and onmouseleave instead, which don’t suffer from the bubble effect.

jQuery has a cross-browser version of both, called mousenter() and mouseleave(). Else, you can refer to this for another cross-browser implementation, which doesn’t rely on external libraries.