如果我们快速移动光标，itemmouseleave事件不会被调用

Question

我有treepanel。在某些特定的情况下，我想在鼠标上显示图像并在treenode的mouseleave上移除该图像。但是当我将鼠标悬停在图像上时，图像被添加，但没有被移除，因为itemmouseleave事件没有被解雇。 我准备了jsfiidle来理解我在其中尝试更改mouseenter和mouseleave上的节点文本的问题。在慢动作上它工作正常，但是如果快速悬停，即使我们远离节点，它也会显示mouseenter。

链接的jsfiddle：http://jsfiddle.net/79ZkX/238/

Ext.create("Ext.tree.Panel", { 
    title: "Car Simple Tree", 
    width: 400, 
    height: 600, 
    store: store, 
    rootVisible: false, 
    lines: true, // will show lines to display hierarchy. 
    useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed 
    renderTo: Ext.getBody(), 
    listeners: { 
    itemmouseenter: function(_this, _item) { 
     var name = _item.get("name"); 
     _item.set("name", "mouseenter"); 
    }, 

    itemmouseleave: function(_this, _item) { 
     //var name = _item.get('name'); 
     _item.set("name", "leave"); 
    } 
    }, 
    columns: [ 
    { 
     xtype: "treecolumn", 
     dataIndex: "name", // value field which will be displayed on screen 
     flex: 1 
    } 
    ] 
}); 

我想删除的鼠标离开图像。谢谢

Answer 1

为此添加了手动解决方法。在快速鼠标悬停itemmouseleave事件不会被触发。所以我维护一个hovered节点的数组，并在node的mouseenter上检查数组是否包含元素，然后设置该节点的文本。

添加的代码本的jsfiddle：http://jsfiddle.net/79ZkX/250/

Ext.create('Ext.tree.Panel', { 
title: 'Car Simple Tree', 
width: 400, 
height: 600, 
store: store, 
rootVisible: false, 
visibleNodes: [], 
lines: true, // will show lines to display hierarchy.  
useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed 
renderTo: Ext.getBody(), 
listeners : { 

    itemmouseenter: function(_this, _item) { 
for (var i = 0; i < this.visibleNodes.length; i++) { 
     var node = this.visibleNodes[i]; 
     node.set('name', "leave"); 
     this.visibleNodes.splice(i, 1); 
    } 
     var name = _item.get('name'); 
     _item.set('name', "mouseenter"); 
     this.visibleNodes.push(_item); 

    }, 

    itemmouseleave: function(_this, _item) { 
      //var name = _item.get('name'); 
     _item.set('name', "leave"); 
    var index = this.visibleNodes.indexOf(_node); 

    if (index != -1){ 
     this.visibleNodes.splice(index, 1); 
    } 
    }, 

}, 
columns: [{ 
    xtype: 'treecolumn', 
    dataIndex: 'name', // value field which will be displayed on screen 
    flex: 1 
}] 

}）;