JavaScript:删除事件监听器
我试图删除侦听器定义中的事件侦听器:
canvas.addEventListener('click', function(event) { click++; if(click == 50) { // remove this event listener here! } // More code here ...
我怎么能这样做? 这=事件…谢谢。
你需要使用命名函数。
此外, click
variables需要在处理程序之外进行增加。
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);
编辑:你可以像这样closuresclick_counter
variables:
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 ));
编辑: 我忘了命名最后两个版本中返回的处理程序。 固定。
canvas.addEventListener('click', function(event) { click++; if(click == 50) { this.removeEventListener('click',arguments.callee,false); }
应该这样做。
你可以使用一个命名的函数expression式(在这种情况下函数被命名为a
),如下所示:
var click = 0; canvas.addEventListener('click', function a(event) { click++; if (click >= 50) { // remove event listener `a` canvas.removeEventListener('click', a); } // More code here ... }
快速和肮脏的工作示例: http : //jsfiddle.net/WqpfZ/1/ 。
有关命名函数expression式的更多信息: http : //kangax.github.io/nfe/ 。
如果@ Cybernate的解决scheme不起作用,请尝试将触发器closures到自己的function,以便引用它。
clickHandler = function(event){ if (click++ == 49) canvas.removeEventListener('click',clickHandler); } canvas.addEventListener('click',clickHandler);
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; }; };
如果有人使用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 ); } });
希望它可以帮助别人。 请注意,由@ user113716给出的答案很好:)
我想你可能需要提前定义处理函数,如下所示:
var myHandler = function(event) { click++; if(click == 50) { this.removeEventListener('click', myHandler); } } canvas.addEventListener('click', myHandler);
这将允许您从名称内部删除名称。
试试这个,它为我工作。
<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>
尝试这个
canvas.addEventListener('click', function(event) { click++; if(click == 50) { canvas.removeEventListener('click'); }