0

Tengo la siguiente funcion que asocia eventos a una serie de elementos:

function colorCeldasActivo(color)
{

  //Damos eventos a todas las celdas
    var celdas = document.getElementsByClassName("celdadibujo");
    for (var i = 0; i < celdas.length; i++) {        
        celdas[i].addEventListener("mouseover", function(){this.id = color; 
        document.body.style.cursor = "pointer"; });
        celdas[i].addEventListener("mouseout", function(){ 
        document.body.style.cursor = "auto"; });
        celdas[i].addEventListener("click",
        colorCeldasInactivo);
    }      
 }

En otra funcion quiero quitar los eventos de raton asociados a las celdas:

function colorCeldasInactivo(){   

var celdas = document.getElementsByClassName("celdadibujo");
 for (var i = 0; i < celdas.length; i++) {            
      celdas[i].removeEventListener("mouseover", function(){this.id = color; 
   document.body.style.cursor = "pointer"; });
        celdas[i].removeEventListener("mouseout", function(){ 
  document.body.style.cursor = "auto"; });
   }   
 }

La question es que con removeEventListener no vale porque no borra eventos con funciones anónimas según lo que he mirado. Entonces ¿Cual seria la forma de desactivar estos eventos? Posiblemente sea facil pero no doy con ello. Un saludo y gracias

2
  • 2
    ¿Y por qué no declarás la función y le pasás esa misma función al asociar y desasociar el evento? Te resuelve el problema y hace que sea muchísimo más sencillo de leer e interpretar tu código
    – Mariano
    el 9 feb. 2018 a las 4:14
  • Hola Mariano. No pille bien lo que dices... el 9 feb. 2018 a las 5:17

2 respuestas 2

3

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

1
  • Tu respuesta es claramente mejor que la mía: el problema a resolver va más allá de lo que el OP pide el 11 feb. 2018 a las 9:33
2

La mejor solución es clonar el elemento y sustituir en el DOM el original: el nuevo no tendrá los eventos:

function colorCeldasInactivo() {
   var celdas = document.getElementsByClassName("celdadibujo");
   for (let i=0; i<celdas.length; i++) {
     let clon=celdas[0].cloneNode(true); //true es copia en profundidad
     celdas[0].parentNode.replaceChild(clon,celdas[0]);
   }

 }

Pero podrías añadir el comportamiento por CSS y no necesitar tantos event listener

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.