over mouseenter event javascript html angularjs mouseevent

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:

  1. Controllers.js : se agregó un método para registrar eventos del mouse
  2. 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>