CODEWITHSUNDEEP
javascriptangularjs
G Chen
G Chen

Reputation: 199

AngularJS mouse event is fired multiple times in a loop

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?

Upvotes: 3

Views: 1818

Answers (1)

Kevin B
Kevin B

Reputation: 95023

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

Upvotes: 9

Related Questions