knockout use mouseenter event binding instead of mouseover

Question

Currently I have such code

<tr class="k-alt" data-bind="event: { mouseover: function(data, event)
{ $root.showPopover(IsDeleted(), event) }}">

and such implementation cause tooltip blinking, because mouseover fires for each inner element of 'tr'

        <tr class="k-alt" data-bind="event: { mouseenter: function(data, event)
{ $root.showPopover(IsDeleted(), event) }}">

If I use here mouseenter knockout doesn't realize that event. How can I get rid of blinking?

Answer 1

About mouseenter

The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.

So if you have jQuery, you can use mouseenter.

var vm = {
  moCount: ko.observable(0),
  incrementMoCount: function () {
    vm.moCount(vm.moCount() + 1);
  },
  meCount: ko.observable(0),
  incrementMeCount: function () {
    vm.meCount(vm.meCount() + 1);
  }
};

ko.applyBindings(vm);

  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout" data-bind="event: {mouseover: incrementMoCount}">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p >0</p></div>
  <p data-bind="text: moCount"></p>
</div>
 
<div class="out enterleave" data-bind="event: {mouseenter: incrementMeCount}">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p data-bind="text: meCount"></p>
</div>