Javascript – How to prevent functions from multiplying themselves [closed]

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