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

admin管理员组

文章数量:1023773

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

Share Improve this question Follow asked Aug 7, 2014 at 15:44 G ChenG Chen 19944 silver badges1313 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

Sorted by: 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)"

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

Share Improve this question Follow asked Aug 7, 2014 at 15:44 G ChenG Chen 19944 silver badges1313 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

Sorted by: 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)"

本文标签： javascriptAngularJS mouse event is fired multiple times in a loopStack Overflow