Javascript 为什么在Firefox和Safari中不触发onclick事件？
我在一个div中有8层画布。有四组两层（屏幕外缓冲区和交换）。有一层用于背景图像，一层用于基本静态绘图，一层用于动画。还有另一层用于淡入淡出另一种动画 在我开发它的过程中，onclick事件工作得很好，但最近有一段时间停止了工作。有时我必须在它启动之前点击两三次 除了约塞米蒂岛上的Firefox和Safari之外，我唯一测试过的环境是iOS（iPhone）上的Safari，奇怪的是，它在iPhone上运行得非常好 下面我有一个html示例和一点JS。我知道人们想要一个能证明问题的样本。如果不给你我所有的原始代码，我无法创建一个 这样行得通，我只想让你了解一下情况：Javascript 为什么在Firefox和Safari中不触发onclick事件？,javascript,html,events,browser,Javascript,Html,Events,Browser,我在一个div中有8层画布。有四组两层（屏幕外缓冲区和交换）。有一层用于背景图像，一层用于基本静态绘图，一层用于动画。还有另一层用于淡入淡出另一种动画 在我开发它的过程中，onclick事件工作得很好，但最近有一段时间停止了工作。有时我必须在它启动之前点击两三次 除了约塞米蒂岛上的Firefox和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>
函数onLoad（）
{
console.log（“已加载”）；
context=document.getElementById（“animatedCanvas_2”）.getContext（“2d”）；
context.fillStyle=“rgba（0,0,0,1）”；
context.fillRect（0,0100）；
}
函数onTouch（e）
{
log（“你碰了我。”）；
}
注意：我没有在JS中的DOM元素上设置任何事件。我能看到的唯一可能的问题是
<div id ="canvasDiv"
我找不到函数或您对它们的调用有任何错误。然而，这对我来说是一个很难的教训，让我不再把互联网上的语言混在一起。这里是对脚本和HTML的重写，让JavaScript在不需要在HTML中调用的情况下执行。它遵循了当前的趋势，即互联网编程在过去几年中似乎一直处于停滞状态
它在Firefox、Chrome、IE11和Safari（我工作时使用的浏览器）中工作。据我所知，您的代码应该可以工作，并且在所有这些浏览器中都适用于我。我不知道你为什么有麻烦。我能提供的最好的方法就是尝试这种变化，看看它是否有效
函数onLoad（）{
console.log（“已加载”）；
context=document.getElementById（“animatedCanvas_2”）.getContext（“2d”）；
context.fillStyle=“rgba（0,0,0,1）”；
fillRect（0,01000100）；
}
函数onTouch（）{
log（“你碰了我。”）；
}
window.onload=函数（）{
onLoad（）；
document.getElementById（“canvasDiv”）.addEventListener（“单击”，onTouch）；
document.getElementById（“canvasDiv”）。addEventListener（“touchstart”，onTouch）；
};
Javascript使用驼峰式大小写（或类似性质的东西），尝试将onclick
替换为onclick和onload
替换为onload。这就是脚本所需的全部内容id=“canvasDiv”，将其修改为id=“canvasDiv”只是为了澄清：上面的代码确实有效。我很奇怪为什么onclick在onTouch中的console.log之后添加代码后会变得如此零散。你是在暗示inlineonLoad
在Safari中不起作用吗？因为它确实。。这不是问题所在。我刚刚在3个不同版本的safari中运行了这个小提琴，它成功了@不，我不是这么说的。我说的是函数没有问题，调用也有问题。然而，这似乎也没有什么问题。当我使用window.onload
而不是body onload
时，脚本工作得非常完美。是的，如果没有OP提供的更多代码/信息，我认为我们无法帮助他。不用说，他提供的代码不是问题的根源。@Prefix我重新表述了我的答案，以便更好地解释其背后的意图。我为这一混乱表示歉意。onLoad正在工作，因为在onLoad中发生了大量初始化，并且工作正常。事实上，除了一些其他的bug之外，除了onclick事件没有一直触发之外，其他的都或多或少地起作用，我确信这一点，因为onTouch函数中的第一个语句是console.log。我删除了空格，尽管它完全有效。没有观察到行为上的任何变化。@GregValcourt我认为我们需要更多的代码来提供帮助，因为您的代码没有明显的错误。使用的外壳没有任何错误。属性onclick
、onload
和ontouchstart
是HTML，而不是JavaScript。onTouch（）
和onLoad（）
的大小写也正确，与JavaScript中函数名的大小写匹配。