Deactivate and reactivate all div content onclick using javascript

Question

Deactivate and reactivate all div content onclick using javascript

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Good morning everyone,

I have this HTML code:

<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>

How could I, using javascript, disable and reactivate all the onclick () events assigned to the images within the div at one time? The div actually includes about 140 more images (I have not included them here in the example), and calling them all one by one in code would be tedious.

Thanks in advance!

javascript

asked by psy 29.03.2017 в 19:40

source

2 answers

0

I leave an example with 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>

answered by 29.03.2017 в 19:47

Paint a frame in c # Error exporting data to Excel from C #

score 2 · Accepted Answer

It's quite simple what you want to do, you can achieve it with a css property called pointer-events , you can simply change it with a javascript function like this

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>