当所有代码都在一个脚本标签中时，为什么这个脚本不会执行？

Question

我正在尝试制作我最初在 Objective C 中创建的按钮的 JavaScript 版本。该方法涉及创建两个函数。第一个在 canvas 上绘制五个圆并保存它们的中心坐标。第二个将圆坐标与每次鼠标单击的坐标进行比较，并使用毕达哥拉斯定理来检测事件是否发生在五个圆圈之一内。

编辑

之前阅读的段落

问题是，如果每个函数都放在单独的脚本中，则绘图函数生成的圆是可见的。但是不知何故，如果我将这两个函数放在同一个脚本中（即通过在 jsfiddle 中注释掉第 52-53 行），它们就会完全从 canvas 中消失。当我引入第二个函数时出现问题，但我不明白为什么。

感谢，两个语法问题现已成功解决。原始问题已更改以反映这一点。 jsfiddle 中的代码在同一个脚本中同时显示两个函数运行，function(e) 显示 clickRing，其中鼠标单击 canvas 并正确识别每个按钮。代码示例现在包含一些丢失的鼠标初始化，这些初始化已阻止鼠标单击成功绘制 clickRing.

这是第二个函数。

<script>

const mouse            = document.getElementById('canvas');
var ctx2               = mouse.getContext('2d');
var x2;                                                  // click x 
var y2;                                                  // click y

var clickRing          = function(e){
    x2                 = e.offsetX - hCentre;
    y2                 = e.offsetY - vCentre;
    var clickRadius    = buttonRadius * 0.85;       // clear button boundary
// show all Mouse hits including misses and near misses
  ctx2.beginPath();    
  ctx2.arc(x2, y2, clickRadius * 0.85, 0, Math.PI*2);
  ctx2.strokeStyle     = "black";
  ctx2.stroke();
        for (i = 0; i < numberOfButtons; i++) {
        x1             = xButtonCoords[i];
        y1             = yButtonCoords[i];
    //                          ctx1 ctx2
        var xSquared   = Math.pow((x1 - x2),2);
        var ySquared   = Math.pow((y1 - y2),2);
    // find distance from button centre coordinates to clickpoint
        var hypotenuse = Math.sqrt(xSquared + ySquared);
        var distance   = parseFloat(hypotenuse).toFixed(0);
        if (distance < (buttonRadius - clickRadius)) {  
            alert("button : "+(i+1)+"\n"+ 
                  "distance from centre to Mouse : "+distance);
            }
        }
    }
        document.addEventListener('mousedown', clickRing);
</script>

这是 jsfiddle 中的完整代码。

我是 Javascript 的新手，正在搜索 here, here, here and here 试图了解有关 DOM 的更多信息，但到目前为止，我还没有找到下一步该尝试什么的线索。我欢迎提出建议。提前致谢。

Answer 1

问题出在传递给您的 mousedown 事件侦听器的回调中。

document.addEventListener('mousedown', function(e));

首先，这是不正确的语法——您声明的函数没有要执行的代码块。 function(e){} 是函数声明，function(e) 不是。如果我运行你的 Jsfiddle 打开了开发者控制台，我们确实可以看到一个语法错误被抛出：

Uncaught SyntaxError: Unexpected token ')'

这解释了为什么将脚本的前半部分与后半部分放在一起时不执行的原因。

您可以通过在运行运行您的 Js Fiddle 时简单地打开开发者控制台来看到同样的错误，我鼓励您养成监视控制台的习惯，以了解其他错误您的脚本错误。

其次，您定义了 clickRing 函数，但实际上并没有使用它。 document.addEventListener('mousedown', function(e){}) 是正确的语法，但它不引用您定义的函数，可以使用变量 clickRing 访问该函数。所以你可以改为

document.addEventListener('mousedown', clickRing);

至于您的其他按钮 click/hover 外观问题，它们是无关的，我鼓励您单独研究它们。我怀疑您会发现 CSS 不会在按钮上工作，但是，因为它们是在 Canvas 中绘制的并且它们不是 DOM.

的一部分

否则，谢谢，这是一个写得很好的问题。

当所有代码都在一个脚本标签中时，为什么这个脚本不会执行？

Why will this script not execute when all the code is in one script tag?

javascript

canvas

mouseevent