CODEWITHSUNDEEP
javascripteventsmousevue.js
Teddy
Teddy

Reputation: 4233

Prevent Edit control inside a row from flickering when mouse is on it

I have a tr inside which I have a div with a glyphicon-pencil.

On tr mouseover, I am showing the div. On tr mouseout, I am hiding the div.

All the above is working well.

However, when mouse is on the div or glyphicon, the tr keeps registering mouseover and mouseouts, and hence the glyphicon keeps flickering.

How to I prevent inner objects from causing mouseouts on the outer object.

This is the code that I have tried (includes Vue.js):

<tr v-cloak v-for='res in store.reservations' @mouseover='setShowTools(res)' @mouseout='unsetShowTools(res)' >
    <td>{{res.entryDate | longToDate | dateOnly}}</td>
    <td>{{res.fromDate | parseDateOnly | dateOnly }}</td>
    <td>{{res.toDate | parseDateOnly | dateOnly }}</td>
    <td>{{res.guestName}}</td>
    <td>{{res.guestContact}}</td>
    <td>{{res.numRooms}}</td>
    <td><div @mousemove.stop @mouseover.stop v-if='res.showTools'><span class="glyphicon glyphicon-pencil"></span></div></td>
</tr>

Upvotes: 0

Views: 54

Answers (1)

Teddy
Teddy

Reputation: 4233

Use mouseleave instead of mouseout! Mouseleave doesn't fire for entering child elements.

Found the solution at this link, although that has not been marked as the accepted answer. https://stackoverflow.com/a/30697096/1364747

Upvotes: 1

Related Questions