knockout 使用 mouseenter 事件绑定而不是 mouseover

Question

目前我有这样的代码

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

这样的实现会导致工具提示闪烁，因为 'tr'

的每个内部元素都会触发鼠标悬停

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

如果我在这里使用mouseenter knockout 并没有意识到该事件。我怎样才能摆脱眨眼？

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.

所以如果你有jQuery，你可以使用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>

knockout 使用 mouseenter 事件绑定而不是 mouseover

knockout use mouseenter event binding instead of mouseover

javascript

mouseover

mouseevent

mouseenter

knockout.js