代码之家 › 专栏 › 技术社区 › ovasylenko

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

mouseenter mouseover mouseevent knockout.js javascript

0

ovasylenko · 技术社区 · 8 年前

目前我有这样的代码

<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) }}">

我怎样才能摆脱眨眼?

1 回复 | 直到 8 年前

1

Roy J 8 年前

About mouseenter

这个 JavaScript事件是Internet Explorer专有的。由于该事件的通用工具,jQuery模拟该事件当鼠标指针进入元素时。任何HTML元素可以接收此事件。

.

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>