您需要在mouseenter回调内删除let timer上的let：

let timer = ''

box[4]?.addEventListener('mouseenter', () => {
    let sec = 0
    timer = setInterval(() => {
        box[4].innerHTML = String(1 + sec)
        sec++
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)   
})  

box[4]?.addEventListener('mouseleave', () => {
    clearInterval(timer)
    box[4].innerHTML = String(0) 
})

原因是当你执行let timer时，你实际上是在填充一个新的本地变量timer，而代码顶部的另一个变量不会被填充，这意味着你在mouseleave处理程序中的clearInterval实际上没有取消任何东西。

let timer = setInterval(() => {
        box[4].innerHTML = String(1 + sec)
        sec++
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)

在这部分代码中，你一次又一次地设置计时器。如果你删除关键字let，它将完美地工作。

这并不是你所要求的，但至少在某些情况下，知道你可以在一个监听器中完成所有这些可能是有用的，我不知道这是否对你的具体情况最好;但经常将该模式用于拖动事件。它将两个事件保持在同一范围内，并且mouseleave事件仅在mouseenter事件之后"活动"，并在之后立即删除它。

let box4 = document.querySelector('.box4');

box4.addEventListener('mouseenter', () => {
    let sec = 0;
    let timer = setInterval(() => {
        box4.innerHTML = String(1 + sec)
        sec++
        if(sec === 10){
            clearInterval(timer);
        }       
    }, 1000)   

  box4.addEventListener('mouseleave', clearBox4);
  
  function clearBox4 () {
    clearInterval(timer);
    box4.removeEventListener('mouseleave',clearBox4);    
    box4.innerHTML = String(0);
    console.log('Removed listener mouseenter on box4 at ' + sec + ' seconds.');
  }
})

.box4 {
 width: 100px;
 height: 100px;
 background-color: blue;
 font-size: 30px;
 color: white;
 padding-top: 15px;
 text-align: center;
 }

<div class="box4"></div>