Фокус работает до щелчка/изменения переключателя. Можно ли запустить клик/изменение перед фокусом?

Question

Ниже вы увидите код, над которым я работаю, и включенный JSFiddle.

Выпуск:

1. Фокус работает до щелчка/изменения поэтому запас двигается до кнопки радио может быть выбрана.

Пожалуйста, объясните код, чтобы я мог узнать об этом. Если у вас нет решения, любые подсказки или направление также будут полезны. Заранее спасибо!

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

Вы можете просто сгореть случай, когда пользователь переходит в .panel. Для этого нужно заменить щелчок:

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

с click OR hover with the mouse. Вот так:

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

А вот пример скрипку: http://jsfiddle.net/nLgqhqwc/10/

Другой способ

Когда не сфокусирован, сделать отступы шире. Таким образом, с содержанием в .panel»не будет двигаться (и пользователь может щелкнуть его легко), и запас будет по-прежнему существует:

.panel{ 
    padding:15px 30px; 
} 

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

Ссылка: http://jsfiddle.net/nLgqhqwc/11/

Answer 2

Вы должны слушать события нажатия на захват фазы , Вы можете сделать:

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

Посмотрите here понять разницу захвата и фазы восходящей цепочки.

Основная проблема заключается в том, что вы не будете использовать jQuery.

Не все поддерживают браузеры перехвате событий (например, Internet Explorer, версии менее 9 нет), но все поддерживают событие бульканье, поэтому это фаза используется для привязки обработчиков событий к в все абстракции в браузере, включены jQuery. jQuery equivalent of JavaScript's addEventListener method

Таким образом, вы не должны касаться о порядке событий. Вы можете решить simple.