Cannot get rid of focus on element after double-click

Question

I have a HTML5 web page and I use 4 canvas controls to render images from my web cam.

By double-clicking and image/canvas I hide the 4 canvases and display a larger canvas control instead.

As soon as I done this one of my controls is highlighted.

This is the original web page BEFORE the double-click:

enter image description here

And this is the web page AFTER the double click:

enter image description here

This is the code that handles the double-click of the smaller canvas element:

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

I have tried adding this to the double-click event:

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

where 'btnPlaySave' is ID of the highlighted control.

Incidentally, this behavior/effect does not appear in IE.

Any suggestions?

ND. this is the HTML for the canavs '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>

document.getElementById("btnPlaySave") is vanilla javascript and you are using jquery. try $('#btnPlaysave").blur(); . Posting your html may help as well. Is btnPlaysave an ID? — floor, Mar 14 '15 at 15:00
@floor, quite right. It was a copy from another eleswhere and I should have used JQuery. — Andrew Simpson, Mar 14 '15 at 15:01
Inside your double click function "$('#canvasLiveView1').on('dblclick', function () {" try doing adding this $(this).blur(); — floor, Mar 14 '15 at 15:05
@floor Hi, just tried but did not work unfortunately - but thanks for the suggestion — Andrew Simpson, Mar 14 '15 at 15:07
Okay so after some searching I found this: document.getElementById('canvas').onmousedown = function(){ return false; }; I grabbed it from here --> http://stackoverflow.com/questions/5311335/html-canvas-double-click-highlight-issue and that person was having a similar problem to you. — floor, Mar 14 '15 at 15:10
great it worked, but shoud l I delete my question? (and thank you) — Andrew Simpson, Mar 14 '15 at 15:12
No leave it up. Its useful. I didn't know this issue until you asked so we both learned something. I will throw that answer up. — floor, Mar 14 '15 at 15:14

score 1 · Accepted Answer · edited May 23 '17 at 10:24

So the canvas creates weird behaviour when double clicked. I found and answer that supposed that in order for it to work properly you can cancel out the events that are triggered by:

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

I grabbed this answer from: HTML Canvas Double Click Highlight Issue which lead to... Clicking inside canvas element selects text

hope this helps people so they don't have to jump around a few questions.

Cannot get rid of focus on element after double-click

1 Answers1