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

Question

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>

Im checking this right now: http://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou — Teddy, Dec 05 '16 at 17:12
Turned out to be simple. Use mouseleave instead of mouseout! It doesn't fire for entering child elements. — Teddy, Dec 05 '16 at 17:29

score 1 · Accepted Answer · edited May 23 '17 at 10:29

1

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

edited May 23 '17 at 10:29

Community

1
1

answered Dec 05 '16 at 17:31

Teddy

4,009
2
33
55

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

1 Answers1