fix(jqLite): mouseenter/-leave should not trigger on child elements

[florianorben]

Mouseenter and mouseleave events were triggered on children of the
element they were bound to.
Change this to the expected behaviour, to only be triggered when
leaving/entering the actual element, not its children.

Closes #2131

[IgorMinar]

this is how jquery implements these event handlers. unfortunately we can't make jqlite incompatible with jquery.

if I missed something please provide more info and reopen this PR

[florianorben]

Hey,

I think you're mixing up mouseenter/-leave with mouseover/-out.
Mouseenter/-leave will not fire until the cursor entered/left the bounding rectangles of the element it was applied to (i.e. it won't fire on child elements), whereas mouseover/out will fire if you're actually leaving the element (e.g. if you hover its child elems).
Jquery has this right, but angular bugs here.

See here for an example (check console for logs):
Angular: http://plnkr.co/edit/4bxQdYwgrdW1tYXsMeUE?p=preview
Jquery: http://plnkr.co/edit/8bseACWjkEO4lj2Q0pmv

[florianorben]

Stupid question perhaps, but I dont see the option to re-open the PR, do I have to do another push to this branch?

[florianorben]

Hey @IgorMinar, did you have time to look at the provided examples, as they show the differences between angular's and jquery's behaviours...?
As I said, I can't reopen the PR, probably because you closed it ;).

(See here for an example (check console for logs):
Angular: http://plnkr.co/edit/4bxQdYwgrdW1tYXsMeUE?p=preview
Jquery: http://plnkr.co/edit/8bseACWjkEO4lj2Q0pmv)

[ghost]

+1
It took me a while to understand there was nothing wrong with my code. I'm surprised there aren't more people interested in this issue.

[neilsarkar]

+1

Anyone have a workaround besides just using jquery?

[sshepard]

I found a non-jQuery solution here:
http://cvmlrobotics.blogspot.com/2013/05/angularjs-incorrect-ng-mouseenter-ng.html

This is still a problem in AngularJS 1.2.16, especially for IE8.

[johnwojtk]

@IgorMinar, @florianorben is correct. jQuery does not implement mouseenter and mouseleave in this way. Ben Nadel's video, linked to below, explains this at 1:20.

http://www.bennadel.com/blog/1805-jquery-events-mouseover-mouseout-vs-mouseenter-mouseleave.htm