HTML5颜色输入无法打开

问题描述

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

我发现了一些东西。在第一个加载中，当我单击颜色选择器时，它会打开，但在随后的加载中，它将触发处理程序进行锚定。我不确定为什么。

解决方法

我编写了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>

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