Question

我在选择的函数中创建了事件监听器，但我无法在“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。

无法删除eventListener

2 个答案: