Explore using mouseenter event instead of …over

[shawna-slh]

from https://twitter.com/AdamSoucie/status/1205168025198047232:

After all that time, what was screwing me was using “mouseover” instead of “mouseenter” as my event, causing my events to trigger multiple times.

...
B) The @w3c_wai
flyout menu tutorial should be updated to reflect that

[AdamSoucie]

Here's some additional info as requested by @yatil via Twitter:

I noticed this issue when I tried to introduce multiple levels of sub-menus. When you use "mouseover" & "mouseout" instead of "mouseenter" & "mouseleave" the events fire every time you move to a new nav item, including going from the parent nav item to its sub-menu children. What I noticed was "mouseout" would trigger first & then immediately invoke "mouseover" again, so visually the user wouldn't notice, but when I watched in my inspected I saw the class I was applying and the ARIA attributes flash.

At first, this wasn't an issue, but the multiple events combined with the timer function made adding additional levels of sub-menus nearly impossible because moving to the next level would trigger the top level to close.

Here's how I fixed it, which admittedly may not be all that great as I'm not the best at JavaScript:
https://gist.github.com/AdamSoucie/57d9e665e8a966b854d4656f17f4ac84

NOTE: Some of the quirks (ie: "this.children[1]...") are specific to my markup. This script also factors in keyboard navigation in combination with the button method from later in the tutorial.

[yatil]

Thanks for the context, @AdamSoucie. The tutorial mostly teaches concepts with demos, it is not expected that those demos work in all circumstances. That said, I’ll look to see if changing from mouseover to mouseenter has no side effects.