AngularJS mouse event is fired multiple times in a loop

Question

I am trying to trigger the function setHighlight when a li element is hovered by mouse. The ng-mouseover event is set in an ng-repeat loop.

The issue is that when I hover a li element, the ng-mouseover is triggered multiple time. The number of trigger times equals to the number of iteration times. Here is my code snippet:

<ul>
    <li ng-repeat="review in foodReviews" ng-mouseover="setHighlight(review.id)">
        <h4>{{review.name}}</h4>
        <b>{{review.stars}} Stars</b>
        <i> -- {{review.location}} </i><br />
        <blockquote> {{review.description}} </blockquote>
        <br/> written by {{review.author}}
    </li>
</ul>

Did I put the hover event in a wrong place?

Answer 1

The mouseover event happens any time the element or any of it's children are hovered over. Therefore, whenever you hover over the h4 inside the li, another mouseover event is triggered. You should instead use the mouseenter event.

ng-mouseenter="setHighlight(review.id)"