Focus is running before the click/change of a radi

Question

Below you will see the code I am working on and an included JSFiddle.

Issue:

1. The focus is running before the click/change so the margin is moving before the radio button can be selected.

Please explain the code so I can learn from this. If you do not have a solution any hints or direction would also be helpful. Thanks in advance!

http://jsfiddle.net/nLgqhqwc/6/

HTML

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <input type="text"/>
</div>

<div class="panel">
    <select>
        <option>option</option>
    </select>
</div>

<div class="panel">
    <input type="radio"/>
</div>

<div class="panel">
    <input type="checkbox"/>
</div>

CSS

.panel{
    padding:15px;
    background:grey;
    margin-bottom:15px;
}

.panel-primary{
    margin:0 15px 0 15px;
    background:blue;
    margin-bottom:15px;
}

jQuery

$(document).ready(function () {

    $('.panel').click(function () {
        event.stopPropagation();
        $('.panel').removeClass('panel-primary');
        $(this).addClass('panel-primary');
    });

    $('input, select').bind('focus blur', function (event) {
        event.stopPropagation();
        $('.panel').removeClass('panel-primary');
        $(this).closest(".panel").addClass('panel-primary');
    });

    $('input[type=radio]').change(function () {
        event.stopPropagation();
        $('.panel').removeClass('panel-primary mrgn-lft-lg');
        $(this).closest(".panel").addClass('panel-primary');
    });

});

Answer 1

You can just fire the event when the user goes over the .panel. To do this you have to replace the click:

$('.panel').click(function () {

with click OR hover with the mouse. That's the way:

$('.panel').on('click mouseover',function () {

And here is the example fiddle: http://jsfiddle.net/nLgqhqwc/10/

Another way

When not focused, make the padding wider. This way the .panel's content will not move (and the user can click it easily) and the margin will be still there:

.panel{
    padding:15px 30px;
}

.panel-primary {
    margin:0 15px 0 15px;
    padding: 15px;
}

Link: http://jsfiddle.net/nLgqhqwc/11/

Answer 2

You must listen the click event on capturing phase. You can do:

document.querySelector('.panel').addEventListener('click', doSomething, true);

Take a look here to understand the difference of capturing and bubbling phases.

The main problem is you won't use jQuery.

Not all browsers support event capturing (for example, Internet Explorer versions less than 9 don't) but all do support event bubbling, which is why it is the phase used to bind handlers to events in all cross-browser abstractions, jQuery's included. jQuery equivalent of JavaScript's addEventListener method

Therefore, you shouldn't concern about event order. You may resolve simple.