Question

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

通过双击和图像/画布，我隐藏了4个画布并改为显示更大的画布控件。

一旦我这样做，我的一个控件就会突出显示。

这是双击前的原始网页：

enter image description here

这是双击后的网页：

enter image description here

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

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

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

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

其中＆＃39; btnPlaySave＆＃39;是突出显示的控件的ID。

顺便说一句，此行为/效果不会出现在IE中。

有什么建议吗？

ND。这是canavs＆＃39; toggle＆＃39;

的HTML

<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

因此双击时画布会产生奇怪的行为。我发现并回答了这样的假设，为了使其正常工作，您可以取消由以下内容触发的事件：

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

我抓住了这个答案：HTML Canvas Double Click Highlight Issue导致...... Clicking inside canvas element selects text

希望这有助于人们，所以他们不必跳过几个问题。

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

1 个答案: