禁用/启用addeventlistener onclick

Question

  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);
}

我正在使用此代码向我的类添加onclick，但我还需要在某些时候禁用onclick。无论如何只是禁用它们而不删除addeventlistener，如果我删除并反复添加似乎不需要使用它，有没有办法禁用和启用它们？

Answer 1

试试这个：

  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);
    }

如果您有任何错误，请告诉我。

Answer 2

基于类的解决方案

其他解决方案建议设置disabled属性。但是，OP似乎希望阻止图像上的点击事件。 image元素没有disable属性（请参阅：w3c reference）。

作为替代方案，OP可以简单地分配一个＆＃34;禁用＆＃34;类到图像。然后，单击处理程序将测试此类，并在不存在时执行（请参阅MDN element.classList）。 OP也可以使用该类对图像进行灰色处理，以便用户了解它已被禁用。

查看并运行下面的代码段，尝试：

＆＃13;

＆＃13;

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');
  });
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;