javascript - 表格单元格上的 Angular 鼠标按下/鼠标悬停

Question

我想突出显示鼠标按下/鼠标悬停行为时的表格单元格。因此，每当我按下鼠标并将鼠标悬停在单元格上时，它就会突出显示。

在这个简单的示例中，有一个小问题:每次单击时，鼠标都会卡在禁用符号上(参见屏幕截图)，并且在我执行另一次单击之前，鼠标按下不会触发。

HTML:

<table>
  <tr *ngFor="let rows of groups">
    <td *ngFor="let cell of rows.row" 
        (mousedown)="down(cell)" 
        (mouseover)="over(cell)"
        (mouseup)="up()"
        [class.active]="cell.isChecked"
    ></td>
  </tr>
</table>

TS:

  active: boolean = false

  down(b) {
    this.active = true
    if (this.active)
      b.isChecked = !b.isChecked
  }

  over(b) {
    if (this.active) 
      b.isChecked = !b.isChecked
  }

  up() {
    this.active = false
  }

是鼠标事件问题、浏览器相关还是代码相关？

提前致谢。

Answer 1

该符号必须与拖放功能相关。尝试将以下属性添加到 td 元素。

ondragstart="return false;" ondrop="return false;"