Запретить запуск фокусного события при нажатии на div

Этот вопрос аналогичен моему предыдущему вопросу, Нажмите действие на Focused DIV, но на этот раз главная тема: "Как предотвратить событие фокуса при запуске, когда я нажимаю один из div. В прошлый раз у меня был один div с tabindex = '- 1', чтобы сделать его сосредоточенным на клике, теперь у меня есть список divs с tabindex > 0, чтобы они могли получить фокус при табуляции.

<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>

несколько стилей:

div {
    height: 20px;
    width: 60%;
    border: solid 1px blue;
    text-align: center;
}
div:focus {
    border: solid 2px red;
    outline: none;
}

Теперь я использую флаг (действие) для запуска действия (предупреждения) при нажатии на div во второй раз и одним щелчком мыши, если он уже сфокусирован, например, с помощью TAB.

var action = false;
$('div')
    .click(function(e){
        e.stopImmediatePropagation();
        if(action){alert('action');}
        action = true;})
    .focus(function(){action = true;})
    .blur(function(){action = false;});

Проблема с приведенным выше кодом - это событие фокуса, которое запускается, что означает, что stopImmediatePropagation не работает так, как я ожидал. Действие двух кликов работает, комментируя строку события фокуса, но вам все равно нужно дважды щелкнуть, когда div получает сосредоточиться на TAB. Вот пример: http://jsfiddle.net/3MTQK/1/

Ответ 1

DEMO здесь

Я думаю, что здесь вам не хватает некоторых частей,

event.stopPropagation() используется для остановки события от пузырьков. Вы можете прочитать об этом здесь.
event.stopImmediatePropagation() В дополнение к тому, что любые дополнительные обработчики для элемента не выполняются, этот метод также останавливает пузырь, неявно вызывая event.stopPropagation(). Вы можете прочитать об этом здесь
Если вы хотите остановить события браузера, вы должны использовать event.preventDefault(). Вы можете прочитать об этом здесь
click = mousedown + mouseup → Фокус будет установлен на элемент HTML, когда мышь будет успешной. Поэтому вместо привязки события click вы должны использовать "mousedown". См. Мою демонстрацию.
Вы не можете использовать 1 логическое значение для определения того, какой div нажали и сколько раз он был нажат. Проверьте мою демонстрацию, чтобы узнать, как вы справитесь с этим.

Ответ 2

Чтобы просто избежать фокуса при нажатии на div, просто используйте mousedown + event.preventDefault(). Используйте mousedown, а не нажмите, потому что, как объяснил @Selvakumar Arumugam, фокус срабатывает, когда mousedown является succesfull, а event.preventDefault() останавливает события браузера (включая наш фокус).

Вот пример кода:

$('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});

Ответ 3

На данный момент явным ответом будет ограничение вашего селектора от простого "div" до системы перегруппированных имен классов, таким образом вы можете контролировать, на каком элементе будет происходить ваше фокусное событие. Это более утомительно и требует кодирования с большим количеством исключений, но будет выполнять эту работу.