JavaScript: Entfernen Sie Ereignis-Listener

Question

Ich versuche, innerhalb eines Zuhörers Definition ein Ereignis-Listener zu entfernen:

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

Wie könnte ich das tun? this = event ... Vielen Dank.

Answer 1

dieses

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

Answer 2

Versuchen Wenn @ Cybernate-Lösung nicht funktioniert, versuchen in den Abzug aus Brechen seine eigene Funktion, so dass Sie darauf verweisen können.

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

Answer 3

Sie müssen benannte Funktionen verwenden.

Auch die click Variable muss außerhalb des Handlers sein, um zu erhöhen.

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: Sie rund um die click_counter Variable wie diese schließen konnte:

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

diese Weise können Sie den Zähler über mehrere Elemente erhöhen können.

---

Wenn Sie nicht wollen, dass, und wollen jedes einen eigenen Zähler haben, dann dies tun:

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:Ich hatte vergessen, den Handler zu nennen zurückgegeben in den letzten zwei Versionen. Fest.

Answer 4

Ich glaube, Sie müssen möglicherweise die Behandlungsfunktion vor der Zeit definieren, etwa so:

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

Dies ermöglicht Ihnen, den Handler mit Namen aus sich selbst heraus zu entfernen.

Answer 5

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

Sollte es tun.

Answer 6

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

Answer 7

Sie könnten eine benannte Funktion Ausdruck (in diesem Fall die Funktion a genannt wird) verwenden, etwa so:

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

Schnell und schmutzig Arbeitsbeispiel: http://jsfiddle.net/WqpfZ/1/.

Weitere Informationen zu benannten Funktionsausdrücken: http://kangax.github.io/nfe/.

Answer 8

Wenn jemand jquery verwendet, er kann es tun, wie folgt:

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

Hoffnung, dass es jemand helfen kann. Beachten Sie, dass die Antwort von @ user113716 funktioniert gut :)

Answer 9

Versuchen Sie es, es funktionierte für mich.

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