JavaScript中onmousemove事件与闭包相关问题咨询（附代码）

嘿，我来帮你梳理这段代码里的问题，顺便结合你提到的闭包相关坑一起解决：

1. 循环变量的全局泄漏坑 #

你的myEventFunction里的i没有用let/var声明，会变成全局变量。这会导致每次触发onmousemove时，循环的i值被意外覆盖，甚至直接打乱循环逻辑。
修复很简单，给i加上let声明，形成块级作用域：

for(let i=0; i<zone.length; i++){
    // ... 后续逻辑
}

2. 坐标比较的逻辑错误 #

posMouse !== zone[i]这种写法是直接比较对象引用，而不是坐标值。毕竟getPos(div)返回的应该是包含top/left或者x/y的对象，两个对象哪怕属性值完全一样，引用也不相等，所以这个判断永远为true，会直接清空数组。
你需要写一个专门的函数来判断鼠标是否在某个div的区域内，比如假设pos是包含top/left/right/bottom的矩形坐标：

function isMouseInZone(posMouse, zonePos) {
    // 根据你的实际坐标规则调整，这里是判断鼠标在矩形范围内
    return posMouse.x >= zonePos.left && posMouse.x <= zonePos.right 
        && posMouse.y >= zonePos.top && posMouse.y <= zonePos.bottom;
}

3. 清空数组的逻辑搞反了 #

现在的逻辑是只要有一个区域不匹配鼠标位置，就清空数组，这和你想要的“鼠标不在任意div区域内时清空”完全相反。正确逻辑应该是：遍历所有区域，检查是否有任意一个区域包含鼠标；如果遍历完所有区域都没找到匹配的，再清空数组。
修复后的myEventFunction：

function myEventFunction(e){
    var posMouse = getMousePos(e); // 替换成你实际获取鼠标位置的方法
    let isMouseInAnyZone = false;
    for(let i=0; i<zone.length; i++){
        if(isMouseInZone(posMouse, zone[i])){
            isMouseInAnyZone = true;
            break; // 找到匹配的就不用继续遍历了
        }
    }
    // 只有鼠标不在任何区域时，才清空数组
    if(!isMouseInAnyZone){
        zone = [];
    }
}

4. 闭包相关的潜在问题（结合你提到的闭包问题） #

如果你的实际代码是动态给多个div绑定事件（比如循环绑定onmousemove），很容易踩闭包的坑——循环里的变量被所有事件回调共享，导致触发时拿到的总是最后一个div的引用。比如错误示例：

// 错误写法：所有回调共享同一个div变量
var divs = document.querySelectorAll('div');
for(var i=0; i<divs.length; i++){
    var div = divs[i];
    div.onmousemove = function(){
        myFunction1(); // 这里的div其实是循环最后一个div的引用
    }
}

修复方案有两种，选你顺手的：

// 方案1：用let声明变量，利用块级作用域隔离
var divs = document.querySelectorAll('div');
for(let i=0; i<divs.length; i++){
    let div = divs[i];
    div.onmousemove = function(){
        myFunction1(div); // 记得给myFunction1加个div参数
    }
}

// 方案2：用立即执行函数（IIFE）创建独立作用域
var divs = document.querySelectorAll('div');
for(var i=0; i<divs.length; i++){
    (function(div){
        div.onmousemove = function(){
            myFunction1(div);
        }
    })(divs[i]);
}

同时记得修改myFunction1，让它接收具体的div参数，别依赖全局的div变量：

function myFunction1(div){
    var pos = getPos(div);
    zone.push(pos); // 用push比zone[zone.length]更简洁直观
}

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