双击后无法摆脱对元素的关注

Question

我有一个 HTML5 网页，我使用 4 个 canvas 控件来渲染来自网络摄像头的图像。

通过双击和 image/canvas 我隐藏了 4 个 canvases 并显示了一个更大的 canvas 控件。

完成此操作后，我的一个控件就会突出显示。

这是双击前的原始网页：

这是双击后的网页：

这是处理较小 canvas 元素双击的代码：

$('#canvasLiveView1').on('dblclick', function () {
    $('#divSingleView').css('display', '');
    $('#divMultiView').css('display', 'none');
    camDoubleClickCam = 1;
});

我试过将此添加到双击事件中：

$('#btnPlaysave').blur();

其中 'btnPlaySave' 是突出显示控件的 ID。

顺便说一下，这个 behavior/effect 不会出现在 IE 中。

有什么建议吗？

ND。这是 canavs HTML 'toggle'

<div style="height:362px;">
    <div id="divSingleView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;display:none;">
        <div style="float:left;width:95px;">&nbsp;</div>
        <div style="float:left;width:330px;margin-top:75px;"><canvas id="canvasLiveView" style="width:330px;height:220px;outline: yellow 1px solid;"></canvas></div>
        <div style="float:left;width:95px;"></div>
    </div>
    <div id="divMultiView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;">
        <div style="float:left;height:170px;margin-left:2px; margin-top:10px;"><canvas id="canvasLiveView1" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;"></canvas></div>
        <div style="float:left;height:170px;margin-top:10px;"><canvas id="canvasLiveView2" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;"></canvas></div>
        <div style="float:left;height:170px;margin-left:2px; margin-bottom:10px;"><canvas id="canvasLiveView3" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
        <div style="float:left;height:170px;margin-bottom:10px;"><canvas id="canvasLiveView4" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
    </div>
</div>

 <div style="height:30px;">
    <div id="divPaused" style="display:none; float:left;margin-left:5px;color:white;font-size:9pt; font-weight:800;">
                    Paused
    </div>
    <div style="width:290px;margin: 0 auto;">
        <div style="float:left;width:24px;margin-left:5px;">
            <img id="btnPlaySave" alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/save.png" class="imgPlaySave" title="Save Image" onclick="PlaySave();" />
        </div>
        <div style="float:left;width:24px;margin-left:5px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/button_minus_red.png" class="imgPlaySlower" title="Decrease Playback Speed" onclick="PlaySlower();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" cursor:pointer" src="/Content/Images/button_plus_green.png" class="imgPlayFaster" title="Decrease Playback Speed" onclick="PlayFaster();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_start.png" class="imgPlayStart" title="Go to First Frame" onclick="PlayStart();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_back.png" class="imgPlayStepBack" title="Step to Previous Frame" onclick="PlayStepBack();" />
        </div>
        <div id="Tempo" style="float: left; width: 40px; text-align: center; vertical-align: middle; font-weight: bold;color:white; font-size: x-small; font-family: Arial, Helvetica, sans-serif;">
                        100
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_pause.png" class="imgPlayPause" title="Pause" onclick="PlayPause();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_play.png" class=" imgPlayPlay" title="Play" onclick="PlayPlay();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_next.png" class="imgPlayStepNext" title="Step to Next Frame" onclick="PlayStepNext();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_end.png" class="imgPlayEnd" title="Go to Last Frame" onclick="PlayEnd();" />
        </div>
        <div style="float:left;width:24px;">
            <img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/LiveFeed.png" class="imgLiveFeed" title="Back to Live Feed" onclick="LiveFeed();" />
        </div>
    </div>
</div>

Answer 1

所以 canvas 在双击时会产生奇怪的行为。我发现并回答说，为了使其正常工作，您可以取消由以下因素触发的事件：

document.getElementById('canvas').onmousedown = function(){ return false; };

我从以下位置抓取了这个答案：HTML Canvas Double Click Highlight Issue which lead to... Clicking inside canvas element selects text

希望这对人们有所帮助，这样他们就不必绕过几个问题。

双击后无法摆脱对元素的关注

Cannot get rid of focus on element after double-click

html

javascript

focus