我正在開發一個 Web 應用程序，該應用程序涉及使用畫布作為人們之間共享的白板。我的菜單上有一個 HTML5 顏色輸入，當鼠標懸停在白板上時該輸入變得可見，以便用戶可以更改繪圖工具的顏色。我的問題是，在測試過程中，顏色選擇器大多數時候都不會打開。我打開了兩個選項卡，其中都包含要測試的白板實例。顏色選擇器只會在我打開的頁面的第一個實例上打開。在第二頁上，當我單擊顏色選擇器時，它拒絕打開。它顯示按鈕上的單擊動畫，但瀏覽器的顏色選擇器對話框未打開。另外，如果我刷新頁面的第一個實例，顏色選擇器也會停止在那里工作。我可以讓它再次工作的唯一方法是完全關閉兩個選項卡并重新打開一個選項卡。我已經嘗試并確認 Chrome 和 Firefox 中都會發生這種情況，這讓我認為這是 HTML 的問題。這是圍繞顏色選擇器的 HTML 片段。<a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min" style="display:none;">   <div class="drawing-tool-menu" style="display:none;">       <input id="color-draw" type="color"/>   </div>   <span class="fa fa-pencil fa-2x"></span></a>錨點是懸停工具欄中的一個按鈕，用于選擇標記，當鼠標懸停在該按鈕上時，顏色選擇器會出現在其上方，以便您可以選擇顏色。這是懸停在白板上的菜單圖片，其中顏色選擇器可見。我試圖在這里詳細說明并記下相關信息。我不確定哪些信息可能對幫助解決問題有價值。我也不確定這是瀏覽器的問題還是我的代碼的問題。如果有幫助的話，我可以添加一些用于顯示菜單的 javascript、更多 HTML 或 CSS。編輯1：JavaScript 代碼我使用這段代碼來檢測顏色的變化 $("#color-draw").off();    $("#color-draw").change(function (e) {        drawingClass.currentColor = $(this).val();});為了顯示/隱藏菜單，我使用它。var menuCloseTimer = {};$(".whiteboard-toolbar a").off();$(".whiteboard-toolbar a").mouseenter(function (e) {    var item = $(this).attr("id")    var key = $(this).attr("data-toggle");    $(".video-toolbar[data-toggle='" + key + "']").show();    $(".whiteboard-toolbar[data-toggle='" + key + "']").show();    $(this).children(".drawing-tool-menu").show();    clearTimeout(menuCloseTimer[item])});$(".whiteboard-toolbar a").mouseleave(function (e) {    var menu = $(this)    var item = $(this).attr("id")    var key = $(this).attr("data-toggle");    $(".video-toolbar[data-toggle='" + key + "']").hide();    menuCloseTimer[item] = setTimeout(function () {        menu.children(".drawing-tool-menu").hide();    }, 500);});編輯2：我發現了一些東西。在第一次加載時，當我單擊顏色選擇器時，它會打開，但在后續加載時，它會觸發錨點的處理程序。我不知道為什么。