Не удается удалить eventListener

Question

Я делаю en event listener внутри выбранной функции, но я не могу удалить ее в функции «win». (выбранная функция реализована в setInterval, но только после вызова clearInterval) Как я могу удалить этот прослушиватель событий? Я не хочу, чтобы текст менялся после того, как я нажал.

function chose() { 
    canvas.onmousemove = function (event) { 
     if (((ballPos == 1) & (event.clientX > posX1) & (event.clientX < posX1 + cupw) & (event.clientY > posY) & (event.clientY < posY + cuph)) | 
      ((ballPos == 2) & (event.clientX > posX2) & (event.clientX < posX2 + cupw) & (event.clientY > posY) & (event.clientY < posY + cuph)) | 
      ((ballPos == 3) & (event.clientX > posX3) & (event.clientX < posX3 + cupw) & (event.clientY > posY) & (event.clientY < posY + cuph))) 
      win = true; 

     else 
      win = false; 
     canvas.addEventListener('click', function() { 
      winpage(win); 
     }, false); 
    } 

} 

function winpage(win) { 
    canvas.removeEventListener('click', function() { 
     winpage(win); 
    }, false); 
    context.clearRect(0, 0, w, h); 
    context.drawImage(backGround, 0, 0, w, h); 
    if (win) 
     context.fillText("YOU WIN!!!", w/2, h/2); 
    else 
     context.fillText("YOU LOSE!!!", w/2, h/2); 
} 

Answer 1

Это должна быть точно такая же функция.

var handler = function() { 
     winpage(win); 
    }; 
function chose() { 
    canvas.onmousemove = function (event) { 
     if (((ballPos == 1) & (event.clientX > posX1) & (event.clientX < posX1 + cupw) & (event.clientY > posY) & (event.clientY < posY + cuph)) | 
      ((ballPos == 2) & (event.clientX > posX2) & (event.clientX < posX2 + cupw) & (event.clientY > posY) & (event.clientY < posY + cuph)) | 
      ((ballPos == 3) & (event.clientX > posX3) & (event.clientX < posX3 + cupw) & (event.clientY > posY) & (event.clientY < posY + cuph))) 
      win = true; 

     else 
      win = false; 
     canvas.addEventListener('click', handler, false); 
    } 

} 

function winpage(win) { 
    canvas.removeEventListener('click', handler, false); 
    context.clearRect(0, 0, w, h); 
    context.drawImage(backGround, 0, 0, w, h); 
    if (win) 
     context.fillText("YOU WIN!!!", w/2, h/2); 
    else 
     context.fillText("YOU LOSE!!!", w/2, h/2); 
} 

Answer 2

Создать слушатель события, как показано ниже, что будет добавлять и удалять, как вы хотели в вашем коде.

var win; 
var listener = function (event) { 
    /* do something here */ 
    // You can also remove event here 
    // As below will remove event from target element 
    // event.target.removeEventListener('click', listener, false); 
    winpage(win); 
}; 

Добавить событие, как показано ниже

function chose() { 
     canvas.onmousemove = function (event){ 
     if(((ballPos == 1)&(event.clientX > posX1)&(event.clientX < posX1+cupw)&(event.clientY > posY)&(event.clientY < posY+cuph)) | 
       ((ballPos == 2)&(event.clientX > posX2)&(event.clientX < posX2+cupw)&(event.clientY > posY)&(event.clientY < posY+cuph)) | 
       ((ballPos == 3)&(event.clientX > posX3)&(event.clientX < posX3+cupw)&(event.clientY > posY)&(event.clientY < posY+cuph))) 
      win = true; 

     else 
      win = false; 
     canvas.addEventListener('click',listener, false);} 
} 

И удалить событие, как показано ниже

winpage = function(win) { 
    canvas.removeEventListener('click',listener, false); 
    context.clearRect(0, 0, w, h); 
    context.drawImage(backGround, 0, 0, w, h); 
    if (win) 
     context.fillText("YOU WIN!!!",w/2,h/2); 
    else 
     context.fillText("YOU LOSE!!!",w/2,h/2); 
} 

Всегда есть ссылка слушателя событий для добавления и удаления его из желаемого элемента DOM.

Прочитать полную документацию по addEventListener и removeEventListener. См. Это example.