0

Buenas a todos,

tengo este código HTML:

<div class="container" style="overflow-y:scroll" id="champions_list">
<img id="Aatrox" title="Aatrox" alt="6300" style="cursor:pointer" onclick="AatroxIcon()" src="champions/Aatrox_Square_0.jpg"/>
<img id="Ahri" title="Ahri" alt="4800" style="cursor:pointer" onclick="AhriIcon()" src="champions/Ahri_Square_0.jpg"/>
<img id="Akali" title="Akali" alt="3150" style="cursor:pointer" onclick="AkaliIcon()" src="champions/Akali_Square_0.jpg"/>
</div>

¿Cómo podría, usando javascript, desactivar y reactivar todos los eventos onclick() asignados a las imágenes dentro del div de una sola vez? El div incluye realmente unas 140 imágenes más (no las he incluido aquí todas en el ejemplo), y llamarlas todas una por una en código sería tedioso.

Gracias de antemano!

3
  • ¿A qué te refieres con "desactivar y reactivar todos los eventos onclick() asignados a las imágenes dentro del div de una sola vez"? ¿Quieres tener una opción que te permita seleccionar múltiples imágenes y ejecutar su onclick al mismo tiempo?
    – Alvaro Montoro
    Commented el 29 mar. 2017 a las 17:52
  • @AlvaroMontoro, deshabilitar y rehabilitar todos los onclick de las imágenes dentro del div de golpe. he probado con .setAttribute("disabled", true) y .removeAttribute("disabled"), pero se le aplica al div contenedor sólo en vez de al contenido.
    – psy
    Commented el 29 mar. 2017 a las 17:58
  • Ok. Gracias por la aclaración. Entonces el resultado esperado es básicamente lo que pone Jorius en su respuesta, ¿no?
    – Alvaro Montoro
    Commented el 29 mar. 2017 a las 18:01

2 respuestas 2

3

Es bastante simple lo que quieres hacer, lo puedes lograr con una propiedad css llamada pointer-events, simplemente la puedes cambiar con una función en javascript de la siguiente forma

var cont = document.getElementsByClassName('container')[0];

function imageClick() {
  console.log('Hola soy una imagen de un gato');
}

function disableClicks() {
  cont.style.pointerEvents = "none";
}

function enableClicks() {
  cont.style.pointerEvents = "auto";
}
.container {
  border: 1px solid black;
  padding: 15px 15px 15px 15px;
  width: 90%;
  text-align: center;
  overflow: hidden;
  pointer-events: auto;
}

img {
  width: 120px;
}
<div class="container" style="overflow-y:scroll" id="champions_list">
  <img id="Aatrox" title="Aatrox" alt="6300" style="cursor:pointer" onclick="imageClick()" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
  <img id="Ahri" title="Ahri" alt="4800" style="cursor:pointer" onclick="imageClick()" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
  <img id="Akali" title="Akali" alt="3150" style="cursor:pointer" onclick="imageClick()" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
</div>
<button onclick="disableClicks();" type="button">Desactivar Clicks</button>
<button onclick="enableClicks();" type="button">Activar Clicks</button>

1
  • Esto me viene perfecto, muchas gracias! :)
    – psy
    Commented el 29 mar. 2017 a las 18:02
0

te dejo un ejemplo con Javascript Nátivo

   //Primero creamos una funcion anonima y ejecutable cuando todo este cargado.
(function (){
//Buscamos todos los Elementos IMG que esten dentro del div con la clase: container
var a = document.querySelectorAll("div.container img");
   //Esto devuelve un Array y entonces lo iteramos 
a.forEach(function (data){
//ahora le asignamos una función anonima al evento onclick
data.onclick = function (){
   //mostramos un alert con el id del elemento que se hizo click
  alert("Hola, yo soy: "+data.id);
}
});
}
)();
<div class="container" style="overflow-y:scroll" id="champions_list">
<img id="Aatrox" title="Aatrox" alt="6300" style="cursor:pointer"  src="champions/Aatrox_Square_0.jpg"/>
<img id="Ahri" title="Ahri" alt="4800" style="cursor:pointer"  src="champions/Ahri_Square_0.jpg"/>
<img id="Akali" title="Akali" alt="3150" style="cursor:pointer"  src="champions/Akali_Square_0.jpg"/>
</div>

1
  • Esto no responde a la pregunta (muestras como asociar el evento a todas las imágenes de golpe, pero no cómo desasociar y reasociar, que es lo que se busca).
    – Alvaro Montoro
    Commented el 29 mar. 2017 a las 17:59

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.