javascript - AngularJS mouse event is fired multiple times in a loop - Stack Overflow

I am trying to trigger the function setHighlight when a li element is hovered by mouse. The ng-mouseove

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?

Share Improve this question asked Aug 7, 2014 at 15:44 G ChenG Chen 1994 silver badges13 bronze badges 2
  • 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
Add a ment  | 

1 Answer 1

Reset to default 9

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745541508a4632149.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信