JavaScript: eliminar detector de eventos

Question

Estoy intentando quitar un detector de eventos en el interior de una definición oyente:

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

¿Cómo podría hacer eso? this = event ... Gracias.

Answer 1

probar este

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

Answer 2

Si @ solución de Cybernate no funciona, trate de romper el gatillo fuera a su propia función de lo que puede hacer referencia a ella.

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

Answer 3

Es necesario utilizar funciones con nombre.

Además, la variable click debe estar fuera del controlador para aumentar.

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: Se podría cerrarse alrededor de la variable click_counter así:

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

esta manera se puede incrementar el contador a través de varios elementos.

---

Si usted no quiere eso, y desea que cada uno tenga su propio contador, a continuación, hacer esto:

EDITAR

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

: siendo devueltosme había olvidado de nombrar el manejador en las últimas dos versiones. Fijo.

Answer 4

creo que es posible que necesite definir la función de controlador antes de tiempo, así:

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

Esto le permitirá quitar el manejador por el nombre desde dentro de sí mismo.

Answer 5

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

Debería hacerlo.

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

se puede utilizar una expresión de la función llamada (en este caso la función se llama a), así:

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

rápida y sucia ejemplo de trabajo: http://jsfiddle.net/WqpfZ/1/.

Más información sobre las expresiones de funciones nombradas: http://kangax.github.io/nfe/.

Answer 8

Si alguien usa jQuery, él puede hacerlo de esta manera:

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

esperanza de que pueda ayudar a alguien. Tenga en cuenta que la respuesta dada por @ user113716 trabajo :) muy bien

Answer 9

Prueba esto, que trabajó para mí.

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