JavaScript: xóa trình nghe sự kiện

Tôi đang cố gắng loại bỏ một người nghe sự kiện bên trong một định nghĩa người nghe:

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

Làm thế nào tôi có thể làm điều đó? đây = sự kiện ... Cảm ơn bạn.

Bạn cần sử dụng các chức năng được đặt tên.

Ngoài ra, clickbiến cần phải nằm ngoài bộ xử lý để tăng.

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: Bạn có thể đóng xung quanh click_counterbiến như thế này:

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

Bằng cách này, bạn có thể tăng bộ đếm trên một số yếu tố.

Nếu bạn không muốn điều đó và muốn mỗi người có một quầy riêng, thì hãy làm điều này:

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: Tôi đã quên đặt tên cho trình xử lý được trả lại trong hai phiên bản trước. Đã sửa.

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

Hãy làm nó.

Bạn có thể sử dụng một biểu thức hàm được đặt tên (trong trường hợp này là hàm được đặt tên abc), như vậy:

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

Ví dụ làm việc nhanh và bẩn: http://jsfiddle.net/8qvdmLz5/2/ .

Thông tin thêm về các biểu thức hàm được đặt tên: http : // Khangax.github.io/nfe/ .

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

Nếu giải pháp của @ Cybernate không hoạt động, hãy thử ngắt kích hoạt chức năng của chính nó để bạn có thể tham khảo nó.

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

Nếu ai đó sử dụng jquery, anh ta có thể làm như thế này:

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

Hy vọng rằng nó có thể giúp đỡ một ai đó. Lưu ý rằng câu trả lời được đưa ra bởi @ user113716 hoạt động tốt :)

Tôi nghĩ rằng bạn có thể cần xác định chức năng xử lý trước thời hạn, như vậy:

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

Điều này sẽ cho phép bạn loại bỏ trình xử lý theo tên từ bên trong chính nó.

Hãy thử điều này, nó làm việc cho tôi.

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