0

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>

1
  • Quieres que se pueda pintar de nuevo aunque lo pares no??
    – G3l0
    Commented el 25 may. 2017 a las 13:21

3 respuestas 3

2

Rta Rapida:

Remueve los event handler en stop_pintar.

function stop_pintar() {
  for (var i = 0; i < celdas.length; i++) {
    celdas[i].removeEventListener("mouseover", colorear_amarillo, false);
    celdas[i].removeEventListener("click", stop_pintar, false);
  }
}

Esto evitara que se sigan pintando los elementos.

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() {
  for (var i = 0; i < celdas.length; i++) {
    celdas[i].removeEventListener("mouseover", colorear_amarillo, false);
    celdas[i].removeEventListener("click", stop_pintar, 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>

5
  • Eso le permitiría pintar otra vez? no verdad?, le quitas el liistener y no te funciona mas si no le das el listener otra vez
    – G3l0
    Commented el 25 may. 2017 a las 13:20
  • @G3l0 pruebalo aqui arriba, si funciona por se se agrega nuevamente, eso ya estaba hecho. Commented el 25 may. 2017 a las 13:38
  • Interesante tu respuesta, que hace el método removeEventListener? es que veo que me podía haber ahorrado tiempo cuando lo hice xD
    – G3l0
    Commented el 25 may. 2017 a las 13:41
  • @G3l0 hace lo opuesto a addEventListener, dejar de escuchar un evento. Commented el 25 may. 2017 a las 16:39
  • Gracias por la aportación amigo ;)
    – G3l0
    Commented el 26 may. 2017 a las 6:19
0

Tiene una variable booleana que sea pintando,al dar click la pones en true y al pasar el ratón por encima de las celdas las pintas si pintando es true, si das otro click pones pintando a false y al pasar por encima de las celdas no pintaría. En cuanto a los colores, es mejor hacer una variable global cuyo valor cambie cuando seleccionas un color y no tener funciones para cada color.

-1

Puedes intentarlo con el siguiente método:

event.stopPropagation();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.