javascript - 当所有代码都在一个脚本标记中时，为什么该脚本不会执行？

Question

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

<小时/>

编辑

之前阅读的段落

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

感谢Bashu's answer两个语法问题现已成功解决。原来的问题已被更改以反射(reflect)这一点。 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和 here试图了解更多关于 DOM 的知识，但到目前为止，没有任何线索告诉我下一步该尝试什么。我欢迎提出建议。提前致谢。

Answer 1

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

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

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

未捕获的语法错误:意外的标记“)”

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

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

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

document.addEventListener('mousedown', clickRing);

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

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