【问题标题】：HTML5 Color Input Won't OpenHTML5 颜色输入无法打开
【发布时间】：2020-11-02 15:50:42
【问题描述】：

我正在开发一个网络应用程序，该应用程序涉及使用画布作为人们之间的共享白板。我在菜单上有一个 HTML5 颜色输入，当将鼠标悬停在白板上时它变得可见，以便用户可以更改绘图工具的颜色。

我的问题是，在测试期间，颜色选择器大部分时间都不会打开。我打开了两个选项卡，都带有要测试的白板实例。颜色选择器只会在我打开的页面的第一个实例上打开。

在第二页上，当我单击颜色选择器时，它拒绝打开。它显示按钮上的单击动画，但浏览器的颜色选择器对话框未打开。此外，如果我刷新页面的第一个实例，颜色选择器也会停止工作。让它再次工作的唯一方法是完全关闭两个选项卡并重新打开一个。

我已经尝试并确认这发生在 Chrome 和 Firefox 中，这让我认为这是 HTML 的问题。这是围绕颜色选择器的 HTML 的 sn-p。

<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：

我发现了一些东西。在第一次加载时，当我单击它打开的颜色选择器时，但在后续加载时，它会触发锚点处理程序。不过我不知道为什么。

【问题讨论】：

这是否涉及任何javascript？请展示您打开颜色选择器的机制（例如 CSS :hover）。请显示任何相关的javascript
通过visiting the MDN resource and testing检查您的浏览器
在mozilla网站上完美运行。
浏览器检查器在查看您自己的页面时会告诉您什么？
我找不到任何重要的东西。控制台中没有任何问题或错误。除此之外，我不确定我应该寻找什么。

标签： javascript html css color-picker

【解决方案1】：

我编写的 HTML 旨在使弹出菜单相对于锚按钮显示。但是，位于锚内部的输入元素导致了这个问题。第一次加载后，单击颜色输入会触发锚点，而不是打开颜色窗口。

我不知道为什么颜色选择器会在第一次加载时工作，但我很确定这是导致问题的原因。我做了一些研究，发现您不应该将按钮放在锚点内，基本上就是这样。

我将颜色输入移出锚点，效果很好。

令人沮丧的是，没有任何关于此问题的文档或浏览器引发的错误。

编辑 1

为了解决这个问题，我将代码更改为：

<div style="display:inline-block;position:relative">
    <a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min">
        <span class="fa fa-pencil fa-2x"></span>
    </a>
    <div class="drawing-tool-menu" id="drawing-tool" data-toggle="remote-whiteboard" style="display:none;">
        <input id="color-draw" type="color" />
    </div>
</div>

这样输入与锚分离，但仍相对于它放置。

【讨论】：