CODEWITHSUNDEEP
javascripthtmleventscanvas
Nathan McKaskle
Nathan McKaskle

Reputation: 3063

Removing an Event Listener For Mouse Click

I see other similar questions asked, but the answers don't actually solve the problem.

I have this event listener:

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

I want to remove it, because once I click it, I want to clear the canvas and do other things. Yet I have to have a named function to remove it. As far as I know I can't have a named listener without losing all the variables used in the anonymous function. How do I have a named listener in this situation? This is one of the very first issues with events that I have come across with learning JavaScript for the canvas. I'm surprised this isn't one of the first things you find in any tutorial.

UPDATE:

I have made it into a named function, but I still have no way to remove it (and the mousemove event) after the button is clicked.

Upvotes: 1

Views: 4182

Answers (1)

adeneo
adeneo

Reputation: 318162

Removing it is pretty much the same as adding it

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

and the event and value of this stays the same wether or not you reference it by name or not.

Upvotes: 4

Related Questions