How to find the list item currently under the mouse pointer in Flex?

Question

I have some List and TileList controls. How can I get a reference to the list item that's currently under the mouse pointer?

Answer 1

add an event listener to each item in your list for mouseOver then in your function it will be the event.currentTarget

Answer 2

There's a simple method in the List/TileList for Flex 3 to do this:

<mx:TileList id="tileList" itemRollOver="{trace('found item ' + event.itemRenderer)}"/>

The ListEvent.ITEM_ROLL_OVER has a bunch of helpful properties too:

• event.itemRenderer
• event.rowIndex
• event.columnIndex

You could get the rolled over data via event.itemRenderer.data, and the selectedIndex from there with tileList.dataProvider.getItemIndex(event.itemRenderer.data)

Answer 3

Thanks for the answers so far. I ultimately came up with something different, and thought I would share it as well. The main reason I opted for this solution is because I am actually responding to an external event, as I am using the custom context menu library to capture the right-click in Javascript. When the right-click is happening, the user may not necessarily be moving the mouse. I could keep track of which item the pointer is over at all times, but I thought that would get complicated. Anyhow my solution worked by subclassing List, some thing like:

package components{
    import mx.controls.List
    use namespace mx_internal

    public class MyList extends List{

        public function findItemIndexForMouse(stageX:Number, stageY:Number):Number{
            var item
            var pt:Point = new Point(stageX, stageY)
            pt = listContent.globalToLocal(pt)
            var rc:int = listItems.length
            for (var i:int = 0; i < rc; i++)
            {
                if (rowInfo[i].y <= pt.y && pt.y < rowInfo[i].y + rowInfo[i].height)
                {
                    item = listItems[i][0]
                    break
                }
            }
            return itemRendererToIndex(item)
        }
    }
}

Now you can call list.findItemIndexForMouse() to get the index of the item given the mouse's stage coordinates. Make sure you use the mx_internal namespace, or you won't have access to some of the required instance variables. For TileList you have to do the same thing except the method looks a bit different:

public function findItemIndexForMouse(stageX:Number, stageY:Number):Number{
    var item
    var pt:Point = new Point(stageX, stageY)
    pt = listContent.globalToLocal(pt)
    var rc:int = listItems.length;
    for (var i:int = 0; i < rc; i++)
    {
        if (rowInfo[i].y <= pt.y && pt.y < rowInfo[i].y + rowInfo[i].height)
        {
            var cc:int = listItems[i].length;
            for (var j:int = 0; j < cc; j++)
            {
                if (listItems[i][j] && listItems[i][j].x <= pt.x
                    && pt.x < listItems[i][j].x + listItems[i][j].width)
                {
                    item = listItems[i][j];
                    if (!DisplayObject(item).visible)
                        item = null;
                    break;
                }
            }
            break;
        }
    }
    return itemRendererToIndex(item)

}