I am looking to create a feature that highlights table cells when the mouse is pressed and hovered over a cell. Essentially, I want the cell to be highlighted whenever the mouse button is clicked and moved over it.
However, in this example, there seems to be a small glitch: every other click results in the mouse getting stuck with a disable-symbol (as shown in the screenshot), and the mousedown event does not trigger until an additional click is performed.
https://i.sstatic.net/USR6F.png
Here is the HTML snippet:
<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>
And here is the TypeScript code:
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
}
Could this issue be related to the mouse events, the browser, or the actual code implementation?
Thank you for your assistance.