Event Contamination click on other events click javascript

0

I have a problem in my project, I am listening to the click event of an image called "mask", conditioned by the detected color where the user clicks on code should execute one or another action conditioned by the color to which he has clicked the user.

The problem , is that by clicking the first time, the function is replicated for all other click events that run, if I reload the page and click on another place I run the event click correctly but this is also replicated for the other click events that you run

Code where the problem is

  if (hex == "#31c531") {

    var figura1 = document.getElementById("figura1");
    figura1.style.display = "block";

    img.addEventListener("click",funcion_click);


    function funcion_click(e) {
    e.preventDefault();

    alert("FIGURA 1");
    e.stopImmediatePropagation();

    }

    }

    else
    {

     var figura1 = document.getElementById("figura1");
    figura1.style.display = "none";

    }

    if (hex == "#0e378d") {

       var figura2 = document.getElementById("figura2");
    figura2.style.display = "block";
    //FIGURA 2

    img.addEventListener("click",funcion_click);


    function funcion_click(e) {
    e.preventDefault();

    alert("FIGURA 2");
    e.stopImmediatePropagation();

    }
    }
    else
    {

     var figura2 = document.getElementById("figura2");
    figura2.style.display = "none";

    }
    if (hex == "#b324c2") {

     var figura3 

= document.getElementById("figura3");
figura3.style.display = "block";


//FIGURA 3
  img.addEventListener("click",funcion_click);


function funcion_click(e) {
e.preventDefault();

alert("FIGURA 3");
e.stopImmediatePropagation();

}

}
else
{

 var figura3 = document.getElementById("figura3");
figura3.style.display = "none";

}
if (hex == "#d83232") {

 var figura4 = document.getElementById("figura4");
figura4.style.display = "block";

//FIGURA 4
img.addEventListener("click",funcion_click);
function funcion_click(e) {
e.preventDefault();

alert("FIGURA 4");
e.stopImmediatePropagation();
}
}
else
{
 var figura4 = document.getElementById("figura4");
figura4.style.display = "none";

}

COMPLETE CODE OPEN CODE

    
asked by Jcastillovnz 24.10.2018 в 17:09
source

0 answers