Why does onclick event not fire in Firefox and Safari?
Question
I've got 8 layers of canvas in a div. There are four groups of two (off screen buffers and swapping). There's one layer for a background image, one layer for basically static drawing, one layer for animation. There's another layer for fading in and out another kind of animation.
While I was developing it, the onclick event worked fine, but has recently stopped working some of the time. Sometimes I have to click two or three times before it fires.
The only other environment I've tested it in (besides Firefox & Safari on Yosemite) is Safari on iOS (iPhone), and oddly, it works perfectly fine on iPhone.
I have a sample of html and a little JS below. I know people want a specimen that demonstrates the problem. I can't create one without giving you all of my original code.
This works, I just want to give you an idea of the situation:
<!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>
This specimen works. I'm wondering if any of you can conceive of a reason why onclick would only work sporadically if more code was added AFTER the console.log in onTouch.
NOTE: I don't set any events on DOM elements from JS.
3 answers
solution1
0 2015-11-11 21:37:37
The only possible issue I can see is
<div id ="canvasDiv"
the space between id and = .
Other than that nothing looks glaringly wrong, but it's hard to say without being able to execute your code.
solution2
0 2015-11-11 21:38:07
I can't find anything wrong with the functions or your call of them. However, it has been a hard lesson for me to stop mingling the languages of the Internet. Here's a rewrite of your script and HTML to have the JavaScript execute without having to be called in the HTML. It follows the current trend that Internet programming seems to have been taking the last very years.
It is working in Firefox, Chrome, IE11, and Safari (browsers I have from work). As far as I can tell, your code should work, and it is for me in all these same browsers. I don't know why you are having trouble. The best I can offer is to try this variation and see if it works.
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>
Note : Though the space between the id attribute and its value is incorrect, most modern browsers can compensate for that. Having said that, it should also be fixed (as it is in my example).
solution3
-1 2015-11-12 05:50:33
Javascript uses camel casing (or something of that nature) try replacing onclick with onClick and onload with onLoad . That's all your script needs
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.