onmouseout触发无法移除元素，导致移出按钮后黄色方块不消失

• 事件绑定完全错位：当前screen()函数仅绑定在第一个按钮的onmouseover事件上，函数内部写的if (btn[0].onmouseout)本质是判断按钮对象是否存在onmouseout这个属性，和“鼠标移出按钮时触发移除”没有任何关联——全程压根没给按钮绑定鼠标移出的监听逻辑，鼠标移开的时候自然不会触发任何操作。
• 元素引用逻辑错误：每次调用screen()都会生成一个全新的p元素实例，就算后续补上移除逻辑，代码里操作的也是函数内临时创建的p的引用，根本碰不到已经渲染在页面上的那个黄色方块，就算执行移除也不会影响页面实际显示的内容。
• 冗余创建隐患：只要鼠标停在按钮上触发一次mouseover就新建一个p，反复进出按钮区域会在页面上堆一堆重叠的黄色方块，完全不符合预期。

HTML 调整 #

给第一个按钮单独补上鼠标移出的事件绑定，明确两个触发时机对应的处理函数：

<header>
    <div class="btn__div">
        <button onmouseover='showYellowBlock()' onmouseout='hideYellowBlock()'>CLICK ME</button>
        <button>CLICK ME 2</button>
        <button>CLICK ME 3</button>
    </div>
    <script src="index.js"></script>
</header>

JS 调整 #

把显示、移除的逻辑拆为独立函数，全局缓存黄色方块的DOM引用，解决重复创建、找不到元素的问题：

// 全局缓存方块引用，避免每次触发都新建元素
let yellowBlock = null;

function showYellowBlock() {
    // 已存在方块就不重复创建，防止DOM冗余
    if (!yellowBlock) {
        yellowBlock = document.createElement('p');
        // 挂在body下，避免被按钮的布局样式限制尺寸和定位
        document.body.appendChild(yellowBlock);
    }
}

function hideYellowBlock() {
    // 方块存在时再执行移除，避免空引用报错
    if (yellowBlock) {
        yellowBlock.remove();
        // 移除后清空引用，下次显示时能正常新建
        yellowBlock = null;
    }
}

CSS 保留原有逻辑即可 #

原有样式实现的200px见方、纯黄色、固定在页面左上角的效果完全匹配需求，不需要改动：

body{
    background-color: lightgrey;
}

.btn__div{
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-top: 2em;
    width: 40%;
    margin: 0 auto;
}

p{
    background: yellow;
    height: 200px;
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

补充说明：原代码把新建的p直接塞到按钮元素内部，会被按钮自身的盒模型、默认尺寸限制，配合绝对定位的样式很容易出现位置偏移，改成挂在body下就能完全按照CSS设定的位置渲染。

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