淘汰赛使用 mouseenter 事件绑定而不是 mouseover答案

【问题标题】：knockout use mouseenter event binding instead of mouseover淘汰赛使用 mouseenter 事件绑定而不是 mouseover
【发布时间】：2017-09-05 11:46:55
【问题描述】：

目前我有这样的代码

<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 淘汰赛不会意识到该事件。我怎样才能摆脱眨眼？

【问题讨论】：

标签： javascript knockout.js mouseevent mouseover mouseenter

【解决方案1】：

About mouseenter

mouseenter JavaScript 事件是 Internet Explorer 专有的。由于事件的通用性，jQuery 模拟了这个事件，所以无论浏览器如何，它都可以使用。该事件被发送到鼠标指针进入元素时的元素。任何 HTML 元素可以接收这个事件。

所以如果你有 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>

【讨论】：