表格单元格上的 Angular mousedown/mouseover答案

【问题标题】：Angular mousedown/mouseover on table cells表格单元格上的 Angular mousedown/mouseover
【发布时间】：2019-12-07 16:13:35
【问题描述】：

我想突出显示鼠标按下/鼠标悬停行为的表格单元格。所以每当我按下鼠标并将鼠标悬停在一个单元格上时，它都会被突出显示。

在这个简单的例子中，有一个小问题：每第二次点击鼠标就会被禁用符号卡住（见截图），直到我再次点击时才会触发 mousedown。

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
  }

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

提前致谢。

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试这样：

.html

<table>
  <tr *ngFor="let rows of groups">
    <td *ngFor="let cell of rows.row" 
        (mouseleave)="!cell.isSelected ? cell.isChecked = true : false" 
        (mouseover)="cell.isChecked = false"
        (click)="cell.isSelected = !cell.isSelected"
        [class.active]="cell.isChecked"
    ></td>
  </tr>
</table>

.ts

groups = [
  {
  row: [
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false},
    { isChecked: true, src: "",isSelected :false}
  ],
   ...
 }

Demo

【讨论】：