Hi, I'm trying to make a drop-down menu that is accessible both by the mouse and the keyboard (say via the tab-key). Ssay for element "X", I am trying to make an event that fires when either:
- 'mouseenter' of X is fired, or - any element within X gains focus when previously none within X had focus. And the "opposite" event that fires when either - 'mouseleave' of X fires - an element of X loses focus when previously one had focus In a way I am trying to merge the mouseenter/mouseleave and focus events. I have made an attempt, with a demo at http://yetagain.net/sandbox/mousefocus/ , with the code of the events at http://yetagain.net/sandbox/mousefocus/mousefocus.js However, the code is a bit of a hack!! - It assumes the only elements that can have focus are links. I guess this can be fixed by an exhaustive list: I've found one at http://yetagain.net/sandbox/mousefocus/mousefocus.js . - On add of a event listener, it attaches 'focus' event listeners to *every* focusable element on the page (so far only links though), and fires off the appropriate event, depending on whether focus is inside or outside the element in question. I tried to use 'blur' events, but I discovered that on tab-navigation of links, 'blur' is fired before 'focus' of the next link: and this any code that responds to 'blur' cannot work out where focus is. - It fires off both events even if only one has ever been added (I'm not sure if this is an issue). If anyone has any suggestions on how to improve the code, and make it less hack-ish I would be grateful. I've not really done anything this advanced with events before, so I don't really know what I'm doing. Michal.
