Angular mousedown/mouseover on table cells

Question

I want to highlight table cells on mousedown/mouseover behaviour. So whenever I have the mouse pressed and hover over a cell, it shall be highlighted.

In this simple example, there is a small issue: on every second click the mouse gets stuck with the disable-symbol (see screenshot), and the mousedown will not fire until I perform another click.

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
  }

Is it an event issue of the mouse, browser related or code related?

Thanks in advance.

Answer 1

The simbol must be related to drag-n-drop feature. Try to add the following attributes to the td element.

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

Answer 2

Try like this:

.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