2017-09-05 60 views
0

目前,我有這樣的代碼淘汰賽使用MouseEnter事件結合,而不是鼠標懸停

<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敲除沒有意識到這一事件。 我該如何擺脫眨眼?

回答

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>