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

Question

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

---

编辑

之前读过的段落

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

感谢Bashu's answer，两个语法问题现已成功解决。原始问题已更改以反映这一点。 jsfiddle 中的代码显示两个函数在同一脚本中一起运行，function(e) 显示clickRing，鼠标在画布上单击并正确识别每个按钮。该代码示例现在包含一些丢失的鼠标初始化，这些初始化导致鼠标单击无法成功绘制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 和 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);

至于您的其他按钮单击/悬停外观问题，它们是无关的，我鼓励您单独研究它们。不过，我怀疑您会发现 CSS 不适用于按钮，因为它们是在 Canvas 中绘制的，并且它们不是 DOM 的一部分。

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