Mouseenter事件未能觸發

我有一組3個菜單項，我試圖添加一個mouseenter事件。我似乎無法讓它工作。我也嘗試循環使用.menu-item類，並沒有發生任何事情。Mouseenter事件未能觸發

這使我瘋狂。有誰知道爲什麼這不起作用？

提前許多感謝所有幫助

代碼如下，並Codepen鏈接：https://codepen.io/emilychews/pen/VzaOoe

（我也不能有一個jQuery的解決方案）。

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>

來源

2017-08-01 The Chewy

'menuItem'是'HTMLCollection'，所以要加你需要來遍歷它從收集 – MysterX

可能的複製[添加監聽器，每個元素的聽衆做什麼querySelectorAll，getElementsByClassName方法等getElementsBy \ *。方法返回？]（https://stackoverflow.com/questions/10693845/what-do-queryselectorall-g etelementsbyclassname-and-other-getelementsby-method） – Teemu

你必須重複拋出的收集和這樣的每個元素添加事件偵聽器：

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

來源

2017-08-01 14:04:15

JS查詢選擇總是會在數組的形式返回元素，所以你的情況，你可以使用這樣的，

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

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

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

來源

2017-08-01 14:23:06

它不是一個數組，而是一個HTMLCollection。最大的區別是某些數組方法（如forEach）將無法工作。 – lumio

Mouseenter事件未能觸發

回答

相關問題