JavaScript chaining events

Question

I have some problems with chaining some events.

I have added an eventListener on several links which on mouseover have to display a drop-down menu. This works as expected, however I also want some triangles to drop down with the menu.

So far, I have tried to match the array indexes of the link elements with the array indexes of the triangles. This works in a strange way. Basically, the menu will drop down but the triangles appear only after I hover the mouse to the second link, like in the image below:

Triangel 1 and 2 appear after moving the mouse to the second link

This behavior continues as I hover the mouse over the other elements. The triangles are displayed as they should.

I know they will remain there because I haven't added the mouseleave event for them.

Here is the code. I'm guessing there is a problem with matching the right array indexes?

let mainCateg = document.querySelectorAll(".main-categ");
  let dropDown = document.querySelector(".drop-down");
  let triangle = document.querySelectorAll('.triangle');

  
  loadEventListeners();
  
  function loadEventListeners() {
    for(i = 0; i < mainCateg.length; i++){
    mainCateg[i].addEventListener('mouseover', drop);
  }
    dropDown.addEventListener('mouseleave', leave );

}

    function drop(e){
  
    for(i = 0; i < mainCateg.length; i++){
      if(mainCateg[i] === e.target){
        triangle[i].style.display = 'block';
        
      }
    }
    dropDown.className ='down';
  }

Any help is much appreciated!

Your snippet doesn't work - please debug it and edit your post with a working snippet — Nino Filiu, Dec 30 '18 at 19:23
It doesn't work because I haven't included the html and css code. Should I do that? I was afraid that it would take too much space — Bogdan Moisa, Dec 30 '18 at 19:40
your code should be [minimal, but also complete and verifiable](https://stackoverflow.com/help/mcve), so yes. — Nino Filiu, Dec 30 '18 at 19:41
@BogdanMoisa did you try to use `e.currentTarget` instead of `e.target`? — quirimmo, Dec 30 '18 at 19:42
@quirimmo This worked! Thank you! Do I still need the for loop? — Bogdan Moisa, Dec 30 '18 at 19:44
with the logic you are using unfortunately yes, do you mind if I add it as an aswer and you mark it as correct? — quirimmo, Dec 30 '18 at 19:47
Sure, be my guest. I'll try to think of a more efficient way of doing this. — Bogdan Moisa, Dec 30 '18 at 20:10

score 0 · Answer 1 · answered Dec 30 '18 at 19:48

0

Change mainCateg[i] === e.target to mainCateg[i] === e.currentTarget

You can check here the difference between target and currentTarget

answered Dec 30 '18 at 19:48

quirimmo

9,800
3
30
45

JavaScript chaining events

1 Answers1