為什么在Firefox和Safari中無法觸發onclick事件？

Question

我的div中有8層畫布。 有四組，每組兩個（屏幕外緩沖區和交換）。 一層用於背景圖像，一層用於基本靜態繪圖，一層用於動畫。 還有另一層用於淡入和淡出另一種動畫。

在我開發它時，onclick事件運行良好，但最近在某些時候已停止工作。 有時，我必須點擊兩次或三下才能觸發。

我測試過的唯一其他環境（除了Yosemite上的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>

這個標本有效。 我想知道你們中是否有人能想到一個原因，就是在onTouch的console.log之后添加更多代碼后，onclick才會偶爾起作用。

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

Answer 1

我唯一看到的可能問題是

<div id ="canvasDiv"

id和=之間的空格。

除此之外，沒有什么看起來是錯誤的，但是如果不執行代碼就很難說。

Answer 2

我找不到功能或您對它們的調用有任何問題。 但是，對於我來說，停止混合Internet語言已經是一個艱巨的教訓。 這是腳本和HTML的重寫，以使JavaScript得以執行而不必在HTML中調用。 遵循當前趨勢，Internet編程似乎已經花費了近幾年的時間。

它可以在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。 這就是您腳本的全部需求

為什么在Firefox和Safari中無法觸發onclick事件？

問題描述

3 個解決方案

解決方案1
0 2015-11-11 21:37:37

解決方案2
0 2015-11-11 21:38:07

解決方案3
-1 2015-11-12 05:50:33

為什么在Firefox和Safari中無法觸發onclick事件？

問題描述

3 個解決方案

解決方案1 0 2015-11-11 21:37:37

解決方案2 0 2015-11-11 21:38:07

解決方案3 -1 2015-11-12 05:50:33

解決方案1
0 2015-11-11 21:37:37

解決方案2
0 2015-11-11 21:38:07

解決方案3
-1 2015-11-12 05:50:33