Javascript / jQuery предотвращает двойные события

Question

Javascript / jQuery предотвращает двойные события

0

У меня есть html-форма.

Он использует клавиатурную навигацию (со стрелками) для перемещения между полями, включая клавишу "Enter".
Он периодически должен запрашивать у пользователя информацию.
Клавиша ввода выбирается как на кнопке, так и в поле формы.

Проблема. Когда пользователь нажимает "ENTER" на кнопке accept, он запускает двойные события в моей форме. Смещение фокуса 2 поля вместо 1.

У меня есть код, который точно показывает, о чем я говорю:

Оригинальное сообщение ~~http://jsfiddle.net/mcraig_brs/UgUUr/1/~~

Измененная почта http://jsfiddle.net/mcraig_brs/UgUUr/2/

Вот пример HTML:

<button id="myButton">Press Enter On Me</button><br>
<input type="text" id="text1" class="tInput" data-index="0"><br>
<input type="text" id="text2" class="tInput" data-index="1"><br>
<input type="text" id="text3" class="tInput" data-index="2"><br>
<div id="log"></div>

Вот пример JS:

function log ( data ) {
    $('#log').append(data + "<br>");   
}
function focusOn(index) {
    log("focusOn(index): " + index);
    $('input.tInput').eq(index).focus();   
}
function focusNext( currentIndex ) {
    log("focusNext(currentIndex):" + currentIndex);
    focusOn(currentIndex + 1);
}
function focusPrevious (currentIndex) {
    log('focusPrevious(currentIndex):' + currentIndex);
    focusOn(currentIndex - 1);
}
$('#myButton').on('click', function(e) {
    log("event:click #myButton");
    focusOn(0);
});
$('input.tInput').on('keyup', function(e) {
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
        case 38:
            log("event:UP ARROW key in input.tInput");
            focusPrevious($(this).data('index'));
            break;
        case 40:
            log('event:DOWN ARROW key in input.tInput');
            focusNext($(this).data('index'));
            break;
    }   
});

Когда я нажимаю "ENTER", когда фокус находится на кнопке в текущем коде, я получаю следующий вывод в лог-div:

event:click #myButton
focusOn(index): 0
event:ENTER key in input.tInput
focusNext(currentIndex):0
focusOn(index): 1

(В настоящий момент в jsFiddle единственным способом, которым я могу перейти к кнопке, является сосредоточиться на первом текстовом поле и "shift + tab" обратно, чтобы он имел фокус, чтобы я мог нажать "ENTER" на нем. код в реальном времени автоматически сфокусирован для пользователя.)

Вопрос: Как я могу предотвратить запуск этого типа двойного события? Я пробовал e.stopPropagation(), но это не дало результатов, которые я искал. Когда пользователь нажал "ENTER", я хочу, чтобы фокус продвигал только 1 поле.

Я боролся с этим в течение нескольких дней, поэтому любая помощь была бы высоко оценена. Обратите внимание, что если пользователь нажимает на кнопку с помощью мыши, она работает правильно, только трижды запускается двойное событие.

Примечание. Мне пришлось немного изменить свой вопрос, чтобы лучше передать ограничения.

user1295718 19 сен. 2013, в 16:37

Источник

Теги:

javascript

jquery

html

javascript-events

2 ответа

1

Вместо этого используйте событие нажатия клавиши:

$('input.tInput').on('keypress', function(e) {    
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
    }   
});

DEMO

A. Wolff 19 сен. 2013, в 11:09

Ещё вопросы

allenhwkim · Accepted Answer · 2013-09-19T11-44-00.000Z

keyup запускает проблему, меняет ее на keypress

$('input.tInput').on('keypress', function(e) {
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
    }   
});

с http://www.quirksmode.org/dom/events/keys.html

нажатие клавиши

Пожары, когда вставлен фактический символ, например, текстовый ввод. Он повторяется, пока пользователь удерживает нажатой клавишу.

KeyUp

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

---- редактировать ---

Чтобы поймать нажатие клавиши и нажатие клавиш, я бы предложил определить его отдельно, http://jsfiddle.net/UgUUr/3/

$('input.tInput').on('keypress', function(e) {
    switch (e.which) {
        case 13:
            log("event:ENTER key in input.tInput");
            focusNext($(this).data('index'));
            break;
    }   
});

$('input.tInput').on('keyup', function(e) {
    switch (e.which) {
        case 38:
            log("event:UP ARROW key in input.tInput");
            focusPrevious($(this).data('index'));
            break;
        case 40:
            log('event:DOWN ARROW key in input.tInput');
            focusNext($(this).data('index'));
            break;
    }   
});

Здравствуйте, мне пришлось немного изменить вопрос, я использовал "нажатие клавиш", но пришлось переключиться на "keyup / keydown", чтобы захватить клавиши со стрелками. Я забыл это, когда я первоначально отправил вопрос.
нет ничего плохого в связывании нескольких событий.