Javascript 无法删除eventListener

我在所选函数中创建en事件侦听器，但无法在“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);
}

---

它必须是完全相同的函数

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

创建一个事件监听器，如下所示，它将根据需要在代码中添加和删除

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元素中添加和删除它

---

阅读和的完整文档。查看此图。

谢谢，尝试过，但现在它甚至对单击都没有反应，可能是因为它删除了之前的偶数侦听器。对此有什么提示吗？请检查处理程序方法，您必须编写一个逻辑，当您要删除它并再次添加它以执行操作时，该逻辑必须正确。我可以看到修改后的新代码吗？如果我使用这样的处理程序，它永远不会进入处理程序函数，然后我尝试这样做：函数处理程序{winpagewin；}但这样它仍然不会删除ListenerLalit Kumar和Krzysiek都给出了正确的答案。要删除事件侦听器，addEventListener和removeEventListener中处理程序的签名必须相同。因此，您不能使用匿名函数来创建侦听器。在add和remove命令中必须使用相同的命名处理程序函数。一种常用的替代方法是创建一个可设置/取消设置的标志，以指示是否要进行某些处理。