Hay que capturar el estado del ratón en el documento en vez de las celdas, para tener mayor superficie... También es necesario asignar eventos a las celdas.
Se asigna el valor de a
cuando ocurren los eventos en el body
:
document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)
Si se suelta el ratón por fuera de la ventana del navegador podría haber problemas, porque al volver a entrar a la ventana, JavaScript no puede saber si el ratón está presionado, y la variable a
estaría en el estado que estaba cuando el ratón estaba en la ventana.
a = 0
reiniciar = function() {
Array.from(
document.querySelectorAll("td")
).map(x => {
x.setAttribute("color", "#80808000")
x.style["background-color"] = x.getAttribute("color")
})
}
document.body.addEventListener("mousedown",()=>a=1)
document.body.addEventListener("mouseup",()=>a=0)
Array.from(
document.querySelectorAll("td")
).map(x => {
x.addEventListener("mousedown", () => {
a = 1;
x.setAttribute("color", "blue")
x.style.backgroundColor = x.getAttribute("color")
})
x.addEventListener("mousemove", () => {
a && (
x.setAttribute("color", "blue"),
x.style.backgroundColor = x.getAttribute("color")
) || (
x.style.backgroundColor = "red"
)
})
x.addEventListener("mouseup", () => {
a = 0;
x.style.backgroundColor = "red"
})
x.addEventListener("mouseleave", () => {
x.style.backgroundColor = x.getAttribute("color")
})
})
table,
td {
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 40px;
height: 40px;
}
<p>
<button onclick="reiniciar()">Reiniciar</button>
</p>
<p>
<table id="casillas">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</p>