Question

我看到其他类似的问题，但答案实际上并没有解决问题。

我有这个事件监听器：

function bigButton(x, y, strTxt, doFunction)
{
    var getID = document.getElementById("canvas_1");

    if (getID.getContext)
    {
        var ctx = getID.getContext("2d");

        var btnW = 150;
        var btnH = 50;
        var cx = x - btnW/2;
        var cy = y - btnH/2;
        var left = cx;
        var right = cx + btnW;
        var top = cy;
        var bottom = cy + btnH;

        bbWhite(cx, cy, btnW, btnH, strTxt);

        getID.addEventListener("mousemove", function bbAnim(event)
        {   
            var mousePos = getMousePos(getID, event);
            var rect = getID.getBoundingClientRect();
            var mouseX = mousePos.x;
            var mouseY = mousePos.y;
            if (mouseX >= left
                && mouseX <= right
                && mouseY >= top
                && mouseY <= bottom)
            {
                bbBlack(cx, cy, btnW, btnH, strTxt);
            }
            else
            {
                bbWhite(cx, cy, btnW, btnH, strTxt);
            }

        }, false);

        getID.addEventListener("click", function bbClick(event)
        {
            var mousePos = getMousePos(getID, event);
            var rect = getID.getBoundingClientRect();
            var clickX = mousePos.x;
            var clickY = mousePos.y;
            if (clickX >= left
                && clickX <= right
                && clickY >= top
                && clickY <= bottom)
            {
                doFunction();
            }

        }, false);
    }
}

我想删除它，因为一旦我点击它，我想清除画布并做其他事情。但我必须有一个命名函数来删除它。据我所知，我不能在没有丢失匿名函数中使用的所有变量的情况下拥有一个命名监听器。在这种情况下如何拥有命名侦听器？这是我在为画布学习JavaScript时遇到的事件的第一个问题之一。我很惊讶这不是你在任何教程中找到的第一件事。

更新：

我已经把它变成了一个命名函数，但是在单击按钮后我仍无法删除它（以及mousemove事件）。

Answer 1

删除它与添加它几乎相同

getID.addEventListener("click", handler, false);

function handler(event) {

    this.removeEventListener('click', handler, false);

    var mousePos = getMousePos(getID, event);
    var rect = getID.getBoundingClientRect();
    var clickX = mousePos.x;
    var clickY = mousePos.y;
    if (clickX >= left
        && clickX <= right
        && clickY >= top
        && clickY <= bottom)
    {
        doFunction();
    }
}

并且this的事件和价值保持不变，或者不按名称引用它。

删除鼠标单击的事件侦听器

1 个答案: