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?

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?

• javascript
• angularjs

• Im not that familiar with angular but yeah its looks like the mouseover is in the loop – Doc Holiday Commented Aug 7, 2014 at 15:48
• 1 mouseover event bubbles up but mouseenter does not. – PSL Commented Aug 7, 2014 at 15:52

1 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)"