HTML5 颜色输入无法打开

Question

我正在开发一个 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：

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

Answer 1

我编写的 HTML 旨在使弹出菜单相对于锚点按钮显示。但是，位于锚点内部的输入元素导致了问题。第一次加载后，单击颜色输入会触发锚点，而不是打开颜色窗口。我不知道为什么颜色选择器在第一次加载时起作用，但我相当确定这就是导致问题的原因。我做了一些研究，发现你不应该将按钮放在锚点内，基本上就是这样。我将颜色输入从锚点中移出，效果非常好。令人沮丧的是，没有任何关于此问题或浏览器引发的错误的文档。编辑1为了解决这个问题，我将代码更改为：<div style="display:inline-block;position:relative">&nbsp; &nbsp; <a href="#button-draw" id="drawing-tool" title="Drawing Tool" data-toggle="remote-whiteboard" data-toggle-2="min">&nbsp; &nbsp; &nbsp; &nbsp; <span class="fa fa-pencil fa-2x"></span>&nbsp; &nbsp; </a>&nbsp; &nbsp; <div class="drawing-tool-menu" id="drawing-tool" data-toggle="remote-whiteboard" style="display:none;">&nbsp; &nbsp; &nbsp; &nbsp; <input id="color-draw" type="color" />&nbsp; &nbsp; </div></div>这样，输入与锚点分离，但仍然相对于锚点放置。