커서를 빨리 ​​움직이면 itemmouseleave 이벤트가 호출되지 않습니다.

Question

treepanel이 있습니다. 특정 조건에서 마우스 입력시 이미지를 표시하고 treenode의 mouseleave에서 이미지를 제거하고 싶습니다. 하지만 마우스를 빠르게 움직이면 이미지가 추가되지만 itemmouseleave 이벤트가 시작되지 않아 제거되지 않습니다. 나는 mouseenter와 mouseleave에서 노드의 텍스트를 변경하려고하는 나의 문제를 이해하기 위해 jsfiidle을 준비했다. 슬로우 모션에서는 잘 작동하지만 마우스를 가져 가면 노드에서 멀리 떨어져 있더라도 마우스 포인터가 표시됩니다. 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

수동 해결 방법을 추가했습니다. Fast Mouse Hover에서 itemmouseleave 이벤트가 트리거되지 않습니다. 그래서 hovered 노드의 배열을 유지하고 노드의 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 
}] 

});