Question

我有一组3个菜单项，我试图添加一个mouseenter事件。我似乎无法让它工作。我也试过循环遍历.menu-item类，没有任何事情发生。

它让我疯了。有谁知道为什么这不起作用？

非常感谢您的任何帮助

代码如下，Codepen链接为：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查询选择器总是以数组的形式返回元素，所以在你的情况下你可以使用这样的东西，

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

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

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

Mouseenter事件无法触发

2 个答案: