javascript - event - MouseEnter vs MouseOver en AngularJs
onhover (1)
Estaba jugando con los eventos del ratón AngularJS y tuve un problema. Sé que el evento MouseEnter se activa cuando el mouse ingresa al contenedor de un elemento y luego se activa MouseOver para todos los elementos secundarios. Gracias a esta animación visualizando los eventos del ratón.
Sin embargo resulta que en mi caso el evento MouseEnter nunca se dispara. Estoy trabajando en la aplicación Angular PhoneCat (paso 10) e hice las siguientes modificaciones:
- Controllers.js : se agregó un método para registrar eventos del mouse
- phone-details.html : Se agregaron los controladores ng-mouseenter y ng-mouseleave
$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>
Resultado:
Solo se registra el evento mouseover y mouseout
Pregunta:
¿Ocurre este comportamiento porque las imágenes son un elemento ul y estamos moviendo el mouse en elementos secundarios? y ¿Cómo puedo obtener el evento mouseenter en la imagen?
Gracias
La directiva ngMouseenter de Angular dispara un evento cuyo tipo es mouseover , como se puede ver en este plunker .
La diferencia de ngMouseover es que se dispara solo una vez: cuando el mouse ingresa al elemento, no después de cada movimiento dentro de este elemento.
<!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>