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

mouseenter JavaScript事件是Internet Explorer专有的。由于事件的一般实用程序，jQuery模拟了这个事件无论浏览器如何都可以使用它。此事件发送给鼠标指针进入元素时的元素。任何HTML元素可以收到这个活动。

因此，如果你有jQuery，你可以使用mouseenter。

＆＃13;

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);

＆＃13;

  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;
  }

＆＃13;

<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>

＆＃13;

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

1 个答案: