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

Question

我有树面板。在某些特定情况下，我想在鼠标进入时显示图像，并在树节点的鼠标离开时删除该图像。但是当我将鼠标快速悬停时，图像会被添加但不会被删除，因为 itemmouseleave 事件没有被触发。我已经准备好 jsfiidle 来理解我的问题，我试图在 mouseenter 和 mouseleave 上更改节点的文本。在慢动作下它工作正常但如果快速悬停它会显示 mouseenter 即使我们远离节点。

Link 到 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
    }
  ]
});

我想删除 mouseleave 上的图像。谢谢

Answer 1

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

向这个 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
}]

});

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

itemmouseleave event is not getting called if we move cursor quickly

javascript

mouseevent

mouseleave

gridpanel

extjs4.1