如果我们快速移动光标,itemmouseleave事件不会被调用
问题描述:
我有treepanel。在某些特定的情况下,我想在鼠标上显示图像并在treenode的mouseleave上移除该图像。但是当我将鼠标悬停在图像上时,图像被添加,但没有被移除,因为itemmouseleave事件没有被解雇。 我准备了jsfiidle来理解我在其中尝试更改mouseenter和mouseleave上的节点文本的问题。在慢动作上它工作正常,但是如果快速悬停,即使我们远离节点,它也会显示mouseenter。如果我们快速移动光标,itemmouseleave事件不会被调用
链接的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
}
]
});
我想删除的鼠标离开图像。谢谢
答
为此添加了手动解决方法。在快速鼠标悬停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
}]
});