Question

我有一个数学游戏的代码。我有一个按钮的功能，它定义了位置，然后绘制回调中指定的按钮。

问题是我只能创建其中一个，因为事件监听器由于某些令人费解的原因，由它们执行的函数引用，而不是由其他字符串名称引用。

不幸的是，这意味着要编写大量重复代码。 eventListener调用的每个函数只会因该特定按钮的函数名称而异。人们如何解决这个问题？有没有办法用字符串命名函数（参见：functAnim＆amp; functClick）？

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

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

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

        function functAnim(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)
            {
                contentCallback(cx, cy, btnW, btnH, true);

            }
            else
            {
                contentCallback(cx, cy, btnW, btnH, false);
            }

        }

        function functClick(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();
                getID.removeEventListener("mousemove", functAnim, false);
                getID.removeEventListener("click", functClick, false);
            }

        }

        contentCallback(cx, cy, btnW, btnH, false);
        getID.addEventListener("click", functClick, false);
        getID.addEventListener("mousemove", functAnim, false);
    }
}

修改

出于某种原因，它并不像我想要的那样清楚。我不想通过字符串调用函数，而是使用动态名称创建它们。例如，因为我需要创建4个按钮，所以我想调用我的函数：factsButton（50,50，addClicked，“add”）;使用“add”，而不是“functClick”，它们可以被称为“addClick”和“addAnim”，或者说它是“sub”而不是“add”，它会将这些事件和函数创建为“subAnim”和“subClick”。这样我就会得到8个独立的事件监听器，每个监听器都有不同的“名称”否则，尽管有4个按钮，我最终只有2个。

Answer 1

你问题的措辞因某些原因而让我感到困惑： - \

无论如何，

如果要通过字符串而不是函数指针调用函数，请将函数作为元素添加到javascript对象中。

// a javascript object containing function definitions

var myFunctions={

    functAnim: function(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)
            {
                contentCallback(cx, cy, btnW, btnH, true);
            }
            else
            {
                contentCallback(cx, cy, btnW, btnH, false);
            }
        },


    functClick: function(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();
            getID.removeEventListener("mousemove", functAnim, false);
            getID.removeEventListener("click", functClick, false);
        }
    }

}

然后你可以用字符串调用你的函数。

// useage
myFunctions["functAnim"](eventObject);   // calls functAnim
myFunctions["functClick"](eventObject);  // calls functClick

在JavaScript中为事件监听器创建动态函数名称

1 个答案: