Question

我在div中有8层画布。有四组（两组）（屏幕外缓冲区和交换）。背景图像有一层，基本上是静态绘图，一层是动画。还有另一层用于淡入和淡出另一种动画。

在我开发它的同时，onclick事件运行良好，但最近一直停止工作。有时我必须在它发射之前点击两到三次。

我测试过的唯一其他环境（除了Firefox和Yosemite上的Safari）是iOS（iPhone）上的Safari，奇怪的是，它在iPhone上运行得非常好。

我有一个html示例和一个小JS。我知道人们想要一个证明问题的标本。如果没有提供我原来的所有代码，我就无法创建一个。

这很有效，我只是想让你了解情况：

<!DOCTYPE html>
<html>
    <head>
            <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>
            <script language="javascript">
                    function onLoad()
                    {
                            console.log("Loaded.");
                            context = document.getElementById("animatedCanvas_2").getContext("2d");
                            context.fillStyle = "rgba(0, 0, 0, 1)";
                            context.fillRect(0,0,100,100);
                    }

                    function onTouch(e)
                    {
                            console.log("You touched me.");
                    }
            </script>
    </head>
    <body onload="onLoad();">
            <div id ="canvasDiv" ontouchstart="onTouch(event);" onclick="onTouch(event);">
                    <canvas id="backgroundCanvas_1" style="position:absolute;top:0px;left:0px;z-index:1;display:none;" width="100px" height="100px"></canvas>
                    <canvas id="backgroundCanvas_2" style="position:absolute;top:0px;left:0px;z-index:1" width="100px" height="100px"></canvas>
                    <canvas id="textCanvas_1" style="position:absolute;top:0px;left:0px;z-index:2;display:none;" width="100px" height="100px"></canvas>
                    <canvas id="textCanvas_2" style="position:absolute;top:0px;left:0px;z-index:2" width="100px" height="100px"></canvas>
                    <canvas id="animatedCanvas_1" style="position:absolute;top:0px;left:0px;z-index:3;display:none;" width="100px" height="100px"></canvas>
                    <canvas id="animatedCanvas_2" style="position:absolute;top:0px;left:0px;z-index:3" width="100px" height="100px"></canvas>
                    <canvas id="successCanvas_1" style="position:absolute;top:0px;left:0px;z-index:4;display:none;" width="100px" height="100px"></canvas>
                    <canvas id="successCanvas_2" style="position:absolute;top:0px;left:0px;z-index:4;display:none;" width="100px" height="100px"></canvas>
            </div>
    </body>
</html>

这个标本有效。我想知道你是否有人能想到如果在onTouch中的console.log之后添加了更多代码，onclick只能偶尔工作的原因。

注意：我没有在JS上设置DOM元素的任何事件。

Answer 1

我能看到的唯一可能的问题是

<div id ="canvasDiv"

id和=之间的空格。

除此之外，没有什么看起来很明显错误，但如果不能执行你的代码就很难说。

Answer 2

我发现函数或你的调用没有任何问题。然而，对我来说，停止混合互联网语言一直是一个艰难的教训。这里重写了您的脚本和HTML，无需在HTML中调用JavaScript即可执行。它遵循当前的趋势，即互联网编程似乎已经持续了很长时间。

它适用于Firefox，Chrome，IE11和Safari（我从工作中获得的浏览器）。据我所知，您的代码应该可以运行，并且在所有这些相同的浏览器中都适用于我。我不知道你为什么遇到麻烦。我能提供的最好的就是尝试这种变化，看它是否有效。

function onLoad() {
    console.log("Loaded.");
    context = document.getElementById("animatedCanvas_2").getContext("2d");
    context.fillStyle = "rgba(0, 0, 0, 1)";
    context.fillRect(0, 0, 100, 100);
}

function onTouch() {
    console.log("You touched me.");
}

window.onload = function() {
    onLoad();
    document.getElementById("canvasDiv").addEventListener("click", onTouch);
    document.getElementById("canvasDiv").addEventListener("touchstart", onTouch);
};

<body>
    <div id="canvasDiv">
        <canvas id="backgroundCanvas_1" style="position:absolute;top:0px;left:0px;z-index:1;display:none;" width="100px" height="100px"></canvas>
        <canvas id="backgroundCanvas_2" style="position:absolute;top:0px;left:0px;z-index:1" width="100px" height="100px"></canvas>
        <canvas id="textCanvas_1" style="position:absolute;top:0px;left:0px;z-index:2;display:none;" width="100px" height="100px"></canvas>
        <canvas id="textCanvas_2" style="position:absolute;top:0px;left:0px;z-index:2" width="100px" height="100px"></canvas>
        <canvas id="animatedCanvas_1" style="position:absolute;top:0px;left:0px;z-index:3;display:none;" width="100px" height="100px"></canvas>
        <canvas id="animatedCanvas_2" style="position:absolute;top:0px;left:0px;z-index:3" width="100px" height="100px"></canvas>
        <canvas id="successCanvas_1" style="position:absolute;top:0px;left:0px;z-index:4;display:none;" width="100px" height="100px"></canvas>
        <canvas id="successCanvas_2" style="position:absolute;top:0px;left:0px;z-index:4;display:none;" width="100px" height="100px"></canvas>
    </div>
</body>

注意：虽然id属性与其值之间的空格不正确，但大多数现代浏览器都可以对此进行补偿。话虽如此，它也应该修复（就像在我的例子中一样）。

Answer 3

Javascript使用驼峰套管（或类似的东西）尝试用 onClick 替换onclick，用 onLoad 替换onload。这就是你所有的脚本需求

为什么onclick事件不会在Firefox和Safari中触发？

3 个答案: