Предотвратить событие фокусировки при нажатии на div

Question

Этот вопрос похож на мой предыдущий вопрос, Действие по щелчку для Focused DIV , но на этот раз основная тема - как предотвратить фокусировочное событие при нажатии на один из элементов div.В прошлый раз у меня был один div с tabindex = '- 1', чтобы сделать его фокусируемым на клике, теперь у меня есть список div с 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 получает фокус на вкладке.Вот пример: http://jsfiddle.net/3MTQK/1/

Answer 1

ДЕМО здесь

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

1. event.stopPropagation() используется дляостановить событие от пузырей.Вы можете прочитать об этом здесь .

2. event.stopImmediatePropagation() В дополнение к тому, что любые дополнительные обработчики на элементе не выполняются, этот метод также неявно останавливает всплывание.звонит event.stopPropagation().Вы можете прочитать об этом здесь

3. Если вы хотите остановить события браузера, вам следует использовать event.preventDefault().Вы можете прочитать об этом здесь

4. click = mousedown + mouseup -> Фокус будет установлен на элемент HTML, когда нажатие мыши будет успешным.Поэтому вместо привязки события click вы должны использовать 'mousedown'.См. Мою демонстрацию.

5. Вы не можете использовать логическое значение 1 действия, чтобы определить, какой div нажимается и сколько раз он был нажат.Проверьте мою демонстрацию, чтобы увидеть, как вы можете справиться с этим.

Answer 2

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

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

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

Answer 3

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