No crees que sería mejor manejarlo por CSS?
.celdadibujo {
cursor: auto;
}
.celdadibujo:hover {
cursor: pointer;
}
Eso funcionaría para que al pasar el mouse por encima cambiara el cursor. Pero tú también quieres suprimir ese comportamiento en ciertas ocasiones.
Entonces digamos que el comportamiento sólo se da cuando los elementos .celdadibujo
tienen además la clase cursorpointer
.
.celdadibujo {
cursor: auto;
}
.cursorpointer:hover {
cursor: pointer;
}
De manera que puedes añadir la clase (y por tanto el hover) invocando:
function activar() {
var celdas = document.querySelectorAll('.celdadibujo');
celdas.forEach(function (celda) {
celda.classList.add('cursorpointer');
});
}
Y quitar la clase invocando
function desactivar() {
var celdas = document.querySelectorAll('.celdadibujo');
celdas.forEach(function (celda) {
celda.classList.remove('cursorpointer');
});
}
La función que pones en la pregunta le asigna a cada celda el id
definido por la variable color
. No se puede (no se debe) tener más de un nodo con el mismo id. Pero si lo que quieres es cambiar el color de la celda y además hacer que un click en una de ellas desactive el color, el pointer y elimine el listener sobre el evento click
:
function desactivar() {
var celdas = document.querySelectorAll('.celdadibujo');
celdas.forEach(function (celda) {
celda.className = 'celdadibujo';
celda.removeEventListener('click', desactivar);
});
}
function activar(color) {
var celdas = document.querySelectorAll('.celdadibujo');
celdas.forEach(function (celda) {
celda.className = 'celdadibujo';
celda.classList.add('cursorpointer');
celda.classList.add(color);
celda.addEventListener("click", desactivar);
});
}
table {
border: 1px solid;
}
td {
border: 1px solid;
padding: 2px 5px;
}
.celdadibujo {
cursor: auto;
}
.cursorpointer:hover {
cursor: pointer;
}
.buttoncolor {
padding: 7px 7px;
margin: 0 3px;
vertical-align: super;
}
.cursorpointer.red {
border: 1px solid red;
}
.cursorpointer.blue {
border: 1px solid blue;
}
.cursorpointer.green {
border: 1px solid green;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
<button class="buttoncolor" id="red" onclick="activar(this.id)"></button>
<button class="buttoncolor" id="blue" onclick="activar(this.id)"></button>
<button class="buttoncolor" id="green" onclick="activar(this.id)"></button>
<button onclick="desactivar()">Desactivar cursor pointer</button>
<table border="1">
<tr>
<td class="celdadibujo">Texto A</td>
<td class="celdadibujo">Texto B</td>
<td class="celdadibujo">Texto C</td>
</tr>
<tr>
<td class="celdadibujo">Texto D</td>
<td class="celdadibujo">Texto E</td>
<td class="celdadibujo">Texto F</td>
</tr>
<tr>
<td class="celdadibujo">Texto G</td>
<td class="celdadibujo">Texto H</td>
<td class="celdadibujo">Texto I</td>
</tr>
</table>
En el caso que quieras añadir el comportamiento a todo el body, la función es más sencilla. Sólo tienes que añadir y quitar la clase del elemento body en vez de iterar cada .celdadibujo