CODEWITHSUNDEEP
javascript
darkness
darkness

Reputation: 225

disable / enable addeventlistener onclick

  var cell_onclick = document.querySelectorAll('.Dicon');
    for(var c = 0; c < cell_onclick.length; c++){
      cell_onclick[c].addEventListener('click', function(){
        handler(this.src);
      }, false);
    }

function handler(_src){
console.log(_src);
}

i am using this code to add onclick to my classes , but i also need to disable the onclick at some point. is there anyway to just disable them without remove the addeventlistener , if i remove and add back repeatedly seem no need to use for that , is there a way to disable and enable them ?

Upvotes: 1

Views: 8797

Answers (2)

7urkm3n
7urkm3n

Reputation: 6321

Try this one:

  var cell_onclick = document.querySelectorAll('.Dicon');
    for(var c = 0; c < cell_onclick.length; c++){
      cell_onclick[c].addEventListener('click', function(){
        if(this.getAttribute('disabled') == 'disabled'){
            this.removeAttribute("disabled")
        }else{
            this.setAttribute('disabled', 'disabled');
        }
        handler(this.src);
      }, false);
    }

Let me know, if you get any errors.

Upvotes: 1

Yogi
Yogi

Reputation: 7229

A class based solution

Other solutions suggest setting the disabled attribute. However, it appears that OP wants to prevent click events on images. The image element does not have a disable attribute (see: w3c reference).

As an alternative, OP could simply assign a "disabled" class to the image. The click handler then tests for this class and executes when not present (see MDN element.classList). OP might also use the class to gray the image so that users understand that it is disabled.

See and run the code snippet below to try:

var clicks = 0;

[].forEach.call(document.querySelectorAll('.Dicon'), function(img) {

  img.addEventListener('click', function(e) {
    if (!this.classList.contains('disabled')) {
      this.classList.add('disabled');

      // do something on click
      console.log( 'click ' + (clicks++));

    }
  });

});



function reset() {
  [].forEach.call(document.querySelectorAll('.Dicon'), function(o) {
    o.classList.remove('disabled');
  });
}


function toggle() {
  [].forEach.call(document.querySelectorAll('.Dicon'), function(o) {
    o.classList.toggle('disabled');
  });
}
.Dicon {
  border: 1px red dotted;
  display: block;
  margin: 10px;
}

.Dicon.disabled {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  /* IE 6-9 */
  border: 1px gray solid;
}
<button onclick="reset()">Reset</button>
<button onclick="toggle()">Toggle</button>
click on an image below
<img class="Dicon" src="https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/network_wireless.png">
<img class="Dicon" src="https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/other_phone.png">
<img class="Dicon" src="https://cdnjs.cloudflare.com/ajax/libs/fatcow-icons/20130425/FatCow_Icons32x32/paintcan.png">

Upvotes: 0

Related Questions