鼠标悬停/鼠标向下事件的异步捕获（角度/打字稿）

Question

我试图在每次鼠标按下或在表中拖动（鼠标按下+鼠标悬停）时运行一个事件。

但是，如果用户以中等速度滚动，则无法使用本机角度鼠标悬停/鼠标进入捕获某些鼠标悬停事件。

是否存在捕获鼠标悬停事件并异步运行进程的最佳方法？

附带了一个带有示例的堆栈闪电战。但是，如果将鼠标悬停在网格中，并将鼠标悬停在其他单元格上方，则会注意到有时单元格不会突出显示。

https://stackblitz.com/edit/angular-pbu1vx

组件：

 <table (mouseleave)="down = false">
      <TR *ngFor="let row of numRows; let i = index">
        <TD class="cellStyle noSelect"
            [class.isHighlighted]="row.isHighlighted === true"
            (mousedown)="gridMouseDown(i)"
            (mouseover)="gridMouseOver(i)"
            (mouseup)="down = false;"
        >&nbsp;
        </TD>
      </TR>
    </table>

TS：

// dummy data for table
numRows = [
    {isHighlighted: false},
    {isHighlighted: false},
    {isHighlighted: false},
    {isHighlighted: false}
    ];

  // tracks if mouse is down
  down = false;

  async gridMouseDown(i) {
    this.down = true;
    // highlight/unhighlight cell and run asynchronous process 
    this.numRows[i].isHighlighted = !this.numRows[i].isHighlighted;
    setTimeout(() => {
      console.log(i)
    }, 1000)
  }

    async gridMouseOver(i) {
    if (this.down) {
      // if mousedown, highlight/unhighlight cell and run async process 
      this.numRows[i].isHighlighted = !this.numRows[i].isHighlighted;
      setTimeout(() => {
        console.log(i)
      }, 1000)
    }
  }

CSS：

.isHighlighted {
  background-color: blue !important;
}