时间戳

首页 > 解决方案 > JavaScript 链接事件

javascript - JavaScript 链接事件

问题描述

我在链接一些事件时遇到了一些问题。

我在几个链接上添加了一个 eventListener，鼠标悬停时必须显示一个下拉菜单。这可以按预期工作，但是我还希望一些三角形与菜单一起下拉。

到目前为止，我已经尝试将链接元素的数组索引与三角形的数组索引进行匹配。这以一种奇怪的方式工作。基本上，菜单会下拉，但三角形只有在我将鼠标悬停到第二个链接后才会出现，如下图所示：

将鼠标移动到第二个链接后出现三角天使1和2

当我将鼠标悬停在其他元素上时，这种行为会继续。三角形按应有的方式显示。

我知道他们会留在那里，因为我没有为他们添加 mouseleave 事件。

这是代码。我猜匹配正确的数组索引有问题吗？

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';
  }

任何帮助深表感谢！

标签： javascripthtml

解决方案

更改mainCateg[i] === e.target为mainCateg[i] === e.currentTarget

您可以在此处查看target 和 currentTarget 之间的区别

推荐阅读