JavaScript鼠标悬停事件未触发，代码问题排查求助

嘿，我帮你找出两个关键问题啦，咱们一步步来解决：

1. 最核心的问题：setup函数从未被执行 #

你把window.addEventListener("load", setup)写在了setup函数内部，这就陷入了死循环：只有setup执行了，才会给window绑定load事件，但setup本身没有被主动调用，所以绑定事件的代码根本没机会跑起来！

2. 次要问题：替换HTML会破坏事件绑定的元素 #

当count函数执行时，你把event.target.parentElement.innerHTML直接改成了counter，这会把div里原来的<a>标签完全替换成纯文本数字。下次再hover的时候，原来绑定了mouseover事件的<a>已经不存在了，自然不会触发事件。

修正后的完整代码 #

HTML（保持不变） #

<div id="one"><a id="pick-one">0</a></div> 
<div id="two"><a id="pick-two">0</a></div> 
<div id="three"><a id="pick-three">0</a></div> 
<div id="four"><a id="pick-four">0</a></div> 
<div id="five"><a id="pick-five">0</a></div>

JavaScript #

var counter = 0; 

function count(event){ 
  counter++; 
  // 直接修改<a>标签的文本，而不是替换整个div的内容
  event.target.textContent = counter; 
} 

function setup(){ 
  var pages = ["one", "two", "three", "four", "five"]; 
  for (var i = 0; i < pages.length; i++){ 
    document.getElementById("pick-" + pages[i]).addEventListener("mouseover", count); 
  } 
} 

// 把load事件绑定移到setup函数外面，这样页面加载时会自动调用setup
window.addEventListener("load", setup);

解释一下修改点： #

• 把window.addEventListener("load", setup)移到setup函数外部，这样页面加载完成后会自动调用setup，完成事件绑定。
• 在count函数里，用event.target.textContent = counter代替修改父元素的innerHTML，这样只会更新<a>标签里的数字，不会破坏原来的DOM结构，保证后续hover还能触发事件。

这样修改后，你hover任意一个div里的数字，计数器就会正常递增啦！

内容的提问来源于stack exchange，提问作者Nat_