JavaScript：删除事件侦听器

JavaScript: remove event listener

提问by thomas

I'm trying to remove an event listener inside of a listener definition:

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

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

How could I do that? this = event... Thank you.

我怎么能那样做？这 = 事件...谢谢。

回答by user113716

You need to use named functions.

您需要使用命名函数。

Also, the clickvariable needs to be outside the handler to increment.

此外，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);

---

---

EDIT:You could close around the click_countervariable like this:

编辑：您可以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);

This way you can increment the counter across several elements.

通过这种方式，您可以跨多个元素增加计数器。

---

---

If you don't want that, and want each one to have its own counter, then do this:

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

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

EDIT:I had forgotten to name the handler being returned in the last two versions. Fixed.

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

回答by edeverett

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

Should do it.

应该做。

回答by Tama

You could use a named function expression (in this case the function is named abc), like so:

您可以使用命名函数表达式（在这种情况下，函数名为 named abc），如下所示：

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

Quick and dirty working example: http://jsfiddle.net/8qvdmLz5/2/.

快速而肮脏的工作示例：http: //jsfiddle.net/8qvdmLz5/2/。

More information about named function expressions: http://kangax.github.io/nfe/.

有关命名函数表达式的更多信息：http: //kangax.github.io/nfe/。

回答by Vinyl Windows

element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};

回答by Brad Christie

If @Cybernate's solution doesn't work, try breaking the trigger off in to it's own function so you can reference it.

如果@Cyber​​nate 的解决方案不起作用，请尝试将触发器分解为它自己的功能，以便您可以引用它。

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

回答by youssman

If someone uses jquery, he can do it like this :

如果有人使用 jquery，他可以这样做：

var click_count = 0;
$( "canvas" ).bind( "click", function( event ) {
    //do whatever you want
    click_count++;
    if ( click_count == 50 ) {
        //remove the event
        $( this ).unbind( event );
    }
});

Hope that it can help someone. Note that the answer given by @user113716 work nicely :)

希望它可以帮助某人。请注意，@user113716 给出的答案效果很好:)

回答by Ender

I think you may need to define the handler function ahead of time, like so:

我认为您可能需要提前定义处理程序函数，如下所示：

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

This will allow you to remove the handler by name from within itself.

这将允许您从其内部按名称删除处理程序。

回答by user3870075

Try this, it worked for me.

试试这个，它对我有用。

<button id="btn">Click</button>
<script>
 console.log(btn)
 let f;
 btn.addEventListener('click', f=function(event) {
 console.log('Click')
 console.log(f)
 this.removeEventListener('click',f)
 console.log('Event removed')
})  
</script>