鼠标移出Elementor链接时重置定时器并阻止弹窗弹出求助

原代码的核心问题 #

• 把mouseleave事件监听嵌套在mouseenter回调内，导致每次鼠标进入都会重复绑定事件，引发逻辑混乱
• clearTimeout调用错误：需要传入定时器ID，而非重新定义弹窗触发的函数
• 未保存定时器的引用，无法在鼠标移出时精准清除对应定时器

修正后的代码 #

document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.districtmarketgg');
    const popupposts = ['3525'];
    // 用Map保存每个元素对应的定时器ID，避免多个元素间的定时器冲突
    const timerMap = new Map();

    elements.forEach(function(el, index) {
        // 鼠标进入：启动延迟定时器
        el.addEventListener('mouseenter', function() {
            const timerId = setTimeout(function() {
                elementorProFrontend.modules.popup.showPopup({ id: popupposts[index] });
                // 弹窗触发后清除该元素的定时器记录
                timerMap.delete(el);
            }, 2000);
            // 存储当前元素的定时器ID
            timerMap.set(el, timerId);
        });

        // 鼠标移出：清除对应定时器
        el.addEventListener('mouseleave', function() {
            const timerId = timerMap.get(el);
            if (timerId) {
                clearTimeout(timerId);
                timerMap.delete(el);
            }
        });
    });
});

代码说明 #

• 使用Map对象关联元素与定时器ID，确保多元素场景下定时器互不干扰
• 鼠标进入时创建定时器并保存ID，移出时通过元素匹配ID并清除定时器
• 弹窗触发后主动删除定时器记录，避免不必要的内存占用

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