属性 onclick="function()" 未按预期运行？答案

【问题标题】：Attribute onclick="function()" not functioning as intended?属性 onclick="function()" 未按预期运行？
【发布时间】：2017-07-19 18:09:21
【问题描述】：

我试过解决这个问题，但我似乎找不到它的解决方案。经过几个小时的摆弄，我发现问题出在按钮标签或 onclick 属性中（如果我错了，请纠正我）。

我的目标是让白点通过按钮移动

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function()
        {
            var canvas =        document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = 345;
            canvas.height = 410;
            canvas.style.border = "1px solid white";

            var left = document.getElementById("left");
            left.onclick = "playerLeft()";

            var x = Math.round(canvas.width/2);
            var y = Math.round(canvas.width/2);
            var rectWidth = 5, rectHeight = 5;
            var fps = 30, frames = 1000/fps;
            var colour = "white";
            var trailColour = "blue";

            ctx.fillStyle = colour;
            ctx.fillRect(x,y,rectWidth,rectHeight);

            function playerLeft() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                x -= 6; 
                ctx.fillStyle = colour;;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            function playerRight() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                x += 6; 
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            function playerUp() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                y -= 6; 
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            function playerDown() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                y += 6;
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
        }
    </script>
</head>
<body style="background-color: black">
    <canvas id="canvas"></canvas>

    <div style="text-align: center; padding: 5px">
        <button id="left">Left</button>
        <button id="up">Up</button>
        <button id="down">Down</button>
        <button id="right">Right</button>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript html button onclick

【解决方案1】：

不使用onxyz="..." 样式事件处理程序的众多原因之一是，您从它们调用的任何函数都必须是全局函数。您的函数不是，它们是 window.onload 回调的本地函数。

相反，只需直接分配函数引用，或者有点过时：

left.onclick = playerLeft;

或使用允许多个处理程序的更现代的技术：

left.addEventListener("click", playerLeft);

【讨论】：

谢谢！但是您能告诉我为什么缺少括号会使代码起作用，而添加括号会使代码无法起作用吗？
@EATYOURDAMNSANDWICH：这不是根本区别。正如我上面所说，根本区别在于您使用的是字符串还是函数引用。函数引用就是：对函数的引用。如果我们在其后添加()，我们将调用该函数并将其返回值分配给onclick。

【解决方案2】：

只调用不带括号的函数。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            canvas.width = 345;
            canvas.height = 410;
            canvas.style.border = "1px solid white";

            var left = document.getElementById("left");
            left.addEventListener("click", playerLeft);

            var x = Math.round(canvas.width/2);
            var y = Math.round(canvas.width/2);
            var rectWidth = 5, rectHeight = 5;
            var fps = 30, frames = 1000/fps;
            var colour = "white";
            var trailColour = "blue";

            ctx.fillStyle = colour;
            ctx.fillRect(x,y,rectWidth,rectHeight);

            function playerLeft() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                x -= 6; 
                ctx.fillStyle = colour;;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }

            function playerRight() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                x += 6; 
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }

            function playerUp() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                y -= 6; 
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
            
            function playerDown() { 
                ctx.fillStyle = trailColour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
                y += 6;
                ctx.fillStyle = colour;
                ctx.fillRect(x,y,rectWidth,rectHeight);
            }
        }
    </script>
</head>
<body style="background-color: black">
    <canvas id="canvas"></canvas>

    <div style="text-align: center; padding: 5px">
        <button id="left">Left</button>
        <button id="up">Up</button>
        <button id="down">Down</button>
        <button id="right">Right</button>
    </div>
</body>
</html>

【讨论】：