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

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

Вы должны прослушать событие щелчка на этапе захвата. Ты можешь сделать:

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

Взгляните сюда, чтобы понять разницу фаз захвата и образования пузырьков.

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

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

Поэтому вам не следует беспокоиться о порядке событий. Вы можете решить просто.

Answer 2

Вы можете просто запустить событие, когда пользователь проходит через .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/