Javascript HTML5颜色输入赢得'；t打开

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

为了显示/隐藏菜单，我使用这个

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

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

---

通过这种方式，输入与锚定分开，但仍然相对于锚定放置。

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

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

我把颜色输入移出了锚，效果非常好

令人沮丧的是，没有任何关于这个问题或浏览器抛出错误的文档

编辑1

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

---

通过这种方式，输入与锚点分离，但仍然相对于锚点放置。

这是否涉及任何javascript？请显示打开颜色选择器的机制（例如CSS

：hover

）。请显示任何相关的javascriptCheck浏览器，因为它在mozilla网站上运行得非常好。当您查看自己的页面时，浏览器检查器会告诉您什么？我找不到任何重要的内容。控制台中没有任何问题或错误。除此之外，我真的不确定我应该寻找什么。这是否涉及任何javascript？请显示打开颜色选择器的机制（例如CSS

：hover

）。请显示任何相关的javascriptCheck浏览器，因为它在mozilla网站上运行得非常好。当您查看自己的页面时，浏览器检查器会告诉您什么？我找不到任何重要的内容。控制台中没有任何问题或错误。除此之外，我真的不确定我应该寻找什么。

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);
});