Chrome扩展弹窗mouse事件共存异常：mouseover/leave/click无法协同

你的问题核心在于每次触发mouseover时，你通过innerHTML完全替换了pophead的内部DOM结构，这会引发两个关键问题：

• 鼠标实际悬停的是新生成的子元素，而非原有的内部元素，这就解释了为什么mouseleave只有从上下边缘移出才生效——左右边缘移出时，鼠标仍在pophead容器范围内，但子元素已被替换，事件触发逻辑彻底混乱。
• 频繁的DOM替换会干扰事件队列，再加上click事件里存在异步操作的时序错误（比如setPophead没有正确执行），最终导致点击回调完全失效。

另外还有个小bug：在click事件的chrome.storage.sync.set回调里，你写的是()=>setPophead，这只是引用了函数，没有实际调用，应该改成()=>setPophead()。

修复步骤 #

1. 避免完全替换DOM：不要用innerHTML重写整个pophead内容，而是直接修改现有子元素的src和文本内容，这样能保留原DOM结构和事件绑定，不会干扰事件触发逻辑。
2. 缓存状态减少异步请求：初始化时读取一次active状态，后续操作直接更新这个变量，必要时再同步到storage，避免重复调用chrome.storage.sync.get导致的时序冲突。
3. 修正函数调用方式：确保在storage更新后正确执行DOM更新函数。

修改后的代码 #

popup.html（无需改动）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PopUp</title>
<link rel="stylesheet" href="popup2.css">
</head>
<body>
<div id="pophead">
<div><img src="imgs/Eclipser_logo.png" id="logo" class="shadow"></div>
<div id="tagline" class="shadow">
FOCUS IS A SUPERPOWER!
</div>
</div>
<script src="popup.js" charset="utf-8"></script>
</body>
</html>

popup.js（核心修改）

document.addEventListener('DOMContentLoaded', function () {
    // 缓存激活状态，减少异步请求次数
    let active;
    const logo = document.getElementById('logo');
    const tagline = document.getElementById('tagline');
    const pophead = document.getElementById('pophead');

    // 初始化读取状态并渲染
    chrome.storage.sync.get('eclipser_all', function (result) {
        active = result.eclipser_all ?? true; // 默认设为激活状态
        updatePophead();
    });

    // 直接更新现有DOM元素，而非替换整个容器内容
    function updatePophead() {
        if (active) {
            logo.src = 'imgs/Eclipser_logo.png';
            tagline.textContent = 'FOCUS IS A SUPERPOWER!';
            pophead.style.backgroundColor = 'green';
        } else {
            logo.src = 'imgs/Eclipser_logo.png';
            tagline.textContent = 'PAUSED';
            pophead.style.backgroundColor = 'grey';
        }
    }

    pophead.addEventListener('mouseover', () => {
        if (active) {
            logo.src = 'imgs/pause.png';
            tagline.textContent = 'PAUSE';
            pophead.style.backgroundColor = 'var(--dark_green)';
        } else {
            logo.src = 'imgs/play.png';
            tagline.textContent = 'ACTIVATE!';
        }
    });

    pophead.addEventListener('mouseleave', updatePophead);

    pophead.addEventListener('click', () => {
        active = !active;
        // 同步状态到storage并更新UI
        chrome.storage.sync.set({ 'eclipser_all': active }, () => {
            updatePophead();
            console.log(active ? 'Eclipser Activated' : 'Eclipser Paused');
        });
    });
});

popup.css（无需改动）

body{
width: 250px;
margin: 0;
padding: 0;
background: #fff;
font-family: 'Quicksand', sans-serif;
font-weight: 400;
color: gray;
}
#pophead{
width: 250px;
height: 80px;
background-color: var(--green);
font-family: 'Quicksand', sans-serif;
padding: 10px 0px;
text-align: center
}
#logo{
max-width:150px;
height:auto;
margin: 10px 10px 6px 10px;
}
#tagline{
width:100%;
color: white;
font-weight: 600;
font-size: 10pt;
}
.shadow{
filter: drop-shadow(2px 2px 8px grey);
}

修复逻辑说明 #

• 直接修改现有DOM元素的属性，不会破坏pophead上绑定的事件监听器，所有事件逻辑都能稳定触发。
• 缓存active状态，避免每次操作都读取storage，减少异步操作带来的时序冲突。
• 简化状态切换逻辑，点击时直接反转active状态再同步到storage，保证DOM更新和storage状态完全一致。

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