如何让不同div中批量生成的按钮鼠标悬停事件全部生效？

核心问题分析 #

出现该现象的主要原因有两点：

1. 未规范声明循环变量导致全局变量污染，引发事件绑定逻辑异常；
2. div元素定位不明确，导致前面的按钮被遮挡，无法触发鼠标事件。

具体解决办法 #

办法一：规范循环变量声明，避免全局污染

将事件绑定循环里的i用let声明，避免使用全局变量：

for (let i = 0; i < w * h; i++) {
    document.getElementById("b" + i).onmouseover = function() {
        console.log(this);
    }
}

之前的循环未声明i，变量会自动挂载到全局作用域，可能和其他逻辑的变量产生冲突，规范声明后可避免这类潜在问题。

办法二：使用事件委托（高效推荐）

无需给每个按钮单独绑定事件，利用事件冒泡机制，给父元素绑定一次事件即可：

document.body.addEventListener('mouseover', function(e) {
    // 判断目标元素是我们生成的按钮
    if (e.target.tagName === 'BUTTON' && e.target.id.startsWith('b')) {
        console.log(e.target);
    }
});

这种方式不仅能解决当前问题，还能提升性能——尤其是生成大量按钮时，无需绑定成百上千个独立事件。

办法三：修复div定位，确保按钮不被遮挡

在生成div的代码中补充定位样式，避免元素重叠遮挡：

for(var i = 0; i < h; i++){
    var div = document.createElement("div");
    div.id = i.toString();
    div.style.position = "absolute";
    div.style.top = (i * 10) + "px";
    div.style.left = "0px"; // 明确left定位
    div.style.zIndex = i; // 设置层级，避免后面的div遮挡前面的
    lab.push([]);
    document.body.appendChild(div);
}

补充left和z-index后，每个div的位置更明确，不会出现按钮被上层元素遮挡无法触发事件的情况。

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