I’m struggling.
I’m doing some work to make navigation fully accessible by mouse over, keyboard and click, depending on the resolution.
I am looking for that in mobile, only the click works.
And hover, click, keyboard for higher resolutions.
It only works perfectly when I load the page at the correct resolution (low or high).
BUT, if I resize live, my functions multiply by themselves by the number of resizes done.
I tried a lot of thing like e.stopPropagation , bubble, return, split functions, all in one…without success.
-
Here is a example of the problem with a factice code, shorter (maybe it could be suffisant to understand the solution with your help) :
Need to reduce and maximize screen and click the button for testing.
https://codepen.io/TanGo21/pen/RwLNWey -
Here is, a part of my “real” code :
Go under 770px, then maximize, and look the console when you go over item “THREE” who contains a submenu.
https://codepen.io/TanGo21/pen/oNGgxBK