Menu
I was playing with AngularJS mouse events and got into a problem. I know MouseEnter event is fired when mouse enters container of an element and there after MouseOver is fired for all child elements. Thanks to this animation Visualizing mouse events
However turns out that in my case MouseEnter event is never fired. I am working on Angular PhoneCat application (step-10) and did following modifications:
$scope.logMouseEvent = function() {
switch (event.type) {
case "mouseenter":
console.log("Hey Mouse Entered");
break;
case "mouseleave":
console.log("Mouse Gone");
break;
default:
console.log(event.type);
break;
}<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-Click="setImage(img)" ng-mouseenter="logMouseEvent()" ng-mouseleave="logMouseEvent()">
</li>
</ul>Only mouseover and mouseout event being logged
Is this behavior happening because images are ul element and we are moving mouse in child elements? and How can I get mouseenter event on image?
Thank you
800
mouseover: The onmouseover event triggers when the mouse pointer enters an element or any one of its child elements. mouseenter: The onmouseenter event is triggered only when the mouse pointer hits the element.
The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children. Tip: This event is often used together with the onmouseover event, which occurs when the pointer is moved onto an element, or onto one of its children.
Definition and Usage The mouseenter event occurs when the mouse pointer is over (enters) the selected element. The mouseenter() method triggers the mouseenter event, or attaches a function to run when a mouseenter event occurs..
The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves.
Angular's ngMouseenter directive fires an event whose type is mouseover, as you can see in this plunker.
The difference from ngMouseover is that it's fired only once - when mouse enters the element, not after every movement within this element too.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body ng-app="">
<button ng-mouseenter="lastEventType=$event.type">
Enter
</button>
Event type: {{lastEventType}}
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
