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

【问题标题】：itemmouseleave event is not getting called if we move cursor quickly如果我们快速移动光标，则不会调用 itemmouseleave 事件
【发布时间】：2018-03-07 14:46:18
【问题描述】：

我有树形面板。在某些特定条件下，我想在鼠标输入时显示图像并在 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
    }
  ]
});

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

【问题讨论】：

标签： javascript mouseevent extjs4.1 mouseleave gridpanel

【解决方案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
}]

});

【讨论】：