wai-tutorials
wai-tutorials copied to clipboard
Explore using mouseenter event instead of …over
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
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.
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.