AngularJS鼠标事件在循环中多次触发

Question

当li元素被鼠标悬停时，我试图触发函数setHighlight 。 ng-mouseover事件在ng-repeat循环中设置。

问题是，当我悬停一个li元素时， ng-mouseover被多次触发。 触发次数等于迭代次数。 这是我的代码片段：

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

我把悬停事件放在了错误的地方吗？

Answer 1

鼠标悬停事件发生在元素或其任何子元素悬停的任何时候。 因此，每当您将鼠标悬停在li内的h4上时，都会触发另一个鼠标悬停事件。 您应该使用mouseenter事件。

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