Tengo un tablero con una paleta de colores que lo que hace es: Seleccionas el color en la paleta, clicas en una celda y pinta del color seleccionado esa más todas las celdas por las que pase el ratón. Bien, hasta ahí todo funciona. La duda que tengo ahora es que quiero detener el evento con otro click, es decir, que en el momento que clique en una celda, deje de pintar.
Mi código es el siguiente:
var elementoTable = document.createElement("tbody");
for (f = 0; f < 30; f++) {
var elementoTR = document.createElement("tr");
for (c = 0; c < 30; c++) {
var elementoTD = document.createElement("td");
elementoTR.appendChild(elementoTD);
}
elementoTable.appendChild(elementoTR);
}
document.getElementById("tablerodibujo").appendChild(elementoTable);
var celdas = document.getElementsByTagName("td");
document.getElementById("color1").addEventListener("click", selec_amarillo, false);
function selec_amarillo() {
document.getElementById("color1").className += "seleccionado";
document.getElementById("pincel").innerHTML = "PINCEL AMARILLO ACTIVADO";
for (var i = 0; i < celdas.length; i++) {
celdas[i].addEventListener("click", click_amarillo, false);
}
}
function click_amarillo() {
this.style.backgroundColor = "#FF0";
for (var i = 0; i < celdas.length; i++) {
celdas[i].addEventListener("mouseover", colorear_amarillo, false);
celdas[i].addEventListener("click", stop_pintar, false);
}
}
function colorear_amarillo() {
this.style.backgroundColor = "#FF0";
}
function stop_pintar() {
return false;
}
#color1 {
background: yellow;
height: 20px;
}
<p>TABLERO DE DIBUJO EN JAVASCRIPT</p>
<table width="500" border="1" id="paleta" summary="Tabla de selección de colores">
<caption>Haga click en un color para comenzar a pintar</caption>
<tr>
<td id="color1"></td>
<td id="color2"></td>
<td id="color3"></td>
<td id="color4"></td>
<td id="color5"></td>
<td id="color6"></td>
</tr>
<tr>
<td colspan="6" id="pincel">PINCEL DESACTIVADO</td>
</tr>
</table>
<p></p>
<div id="zonadibujo">
<caption>Haga CLICK en cualquier celda para activar/desactivar el Pincel</caption>
<table id="tablerodibujo"></table>
</div>