Cancel an event in Javascript

0

I have a board with a palette of colors that what it does is: You select the color in the palette, click on a cell and paint the selected color that plus all the cells through which the mouse passes. Well, until then everything works. The question I have now is that I want to stop the event with another click, that is, when I click on a cell, stop painting.

My code is as follows:

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>
    
asked by Jopimar 25.05.2017 в 14:34
source

3 answers

2

Rta Rapida:

Remove the event handler in 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);
  }
}

This will prevent the elements from being painted.

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>
    
answered by 25.05.2017 / 15:10
source
0

It has a boolean variable that is pintando , when you click on it, you put it in true and when you mouse over the cells you paint them if you paint is true, if you give another click put painting to false and when going over the cells I would not paint. As for colors , it is better to make a global variable whose value changes when you select a color and have no functions for each color.

    
answered by 25.05.2017 в 15:05
-1

You can try it with the following method:

event.stopPropagation();
    
answered by 25.05.2017 в 14:58