Focus Is Running Before The Click/change Of A Radio Button. Is It Possible To Run The Click/change Before The Focus?

Below you will see the code I am working on and an included JSFiddle. Issue: The focus is running before the click/change so the margin is moving before the radio button can be se

Solution 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:15px30px;
}

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

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

Solution 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.