我正在开发一个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(如果有帮助的话)。
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);
});
我发现了一些东西。在第一次单击颜色选择器时,它会打开,但在随后的加载中,它会触发处理程序进行锚定。我不确定为什么。
我写的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>
这样,输入与锚分离,但仍相对于锚放置。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句