JavaScript：删除事件侦听器

javascript event-handling events listener

2022-08-30 01:41:11

我正在尝试删除侦听器定义中的事件侦听器：

canvas.addEventListener('click', function(event) {
    click++;
    if(click == 50) {
        // remove this event listener here!
    }
// More code here ...

我该怎么做？this = 事件...

答案 1

您需要使用命名函数。

此外，变量需要在处理程序外部才能递增。click

var click_count = 0;

function myClick(event) {
    click_count++;
    if(click_count == 50) {
       // to remove
       canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

编辑：您可以像这样关闭变量：click_counter

var myClick = (function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})( 0 );

// to add
canvas.addEventListener('click', myClick);

这样，您就可以在多个元素之间递增计数器。

如果您不希望这样，并且希望每个人都有自己的计数器，请执行以下操作：

var myClick = function( click_count ) {
    var handler = function(event) {
        click_count++;
        if(click_count == 50) {
           // to remove
           canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick( 0 ));

编辑：我忘记命名最近两个版本中返回的处理程序。固定。

答案 2

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

应该这样做。