鼠标输入事件触发失败

Question

我有一组 3 个菜单项，我正在尝试向其添加 mouseenter 事件。我似乎根本无法让它工作。我也试过遍历 .menu-item class 但没有任何反应。

快把我逼疯了。有谁知道为什么这不起作用？

非常感谢您的帮助

代码如下，Codepen link 是：https://codepen.io/emilychews/pen/VzaOoe

（我也没有 jQuery 解决方案）。

JS

var menuItem = document.querySelectorAll('.menu-item');

  function myMouseEnter() {

    alert('mouse entered');

  }

menuItem.addEventListener('mouseenter', myMouseEnter, false)

使用循环的注释掉版本

//   function myMouseEnter() {

//     for(i=0; i < menuItem.length; i++){

//        alert ('mouse entered');
//       
//       }

//     }

//   menuItem.addEventListener('mouseenter', myMouseEnter, false)

CSS

.menu-item {
padding: 10px;
font-family: arial;
}

HTML

<ul class="unclick--menuitems">
  <li class="menu-item item1"><a href="//google.com">About</a></li>
  <li class="menu-item item2"><a href="//google.com">Work</a></li>
  <li class="menu-item item3"><a href="//google.com">Contact</a></li>
</ul>

Answer 1

您必须像这样遍历集合并在每个元素上添加事件侦听器：

var menuItems = document.querySelectorAll('.menu-item');

function myMouseEnter() {
 alert('mouse entered');
}

for(var i=0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseenter', myMouseEnter, false);
}

Answer 2

JS 查询选择器总是 return 数组形式的元素，所以在你的情况下你可以使用这样的东西，

var menuItems = document.querySelectorAll('.menu-item');

function myMouseEnter() {
 console.log('mouse entered');
}

menuItems[0].addEventListener('mouseenter', myMouseEnter);

鼠标输入事件触发失败

Mouseenter Event Failing to Trigger

javascript

mouseevent

mouseenter