Событие нажатия клавиш несколько событий

Question

У меня есть кнопка и серия текстовых полей. Я пытаюсь облегчить навигацию по клавиатуре. Вот что у меня есть:

HTML

<button id="button1">Click me</button> 
<input type="text" id="field1" name="field1"> 
<input type="text" id="field2" name="field2"> 
<input type="text" id="field3" name="field3"> 

JS/JQuery v 1.9.1

/* If they click the button */ 
$('#button1').on('click', function() { 
    moveToNextInputField(); /* <-- Mystical function to "focus" the next input */ 
}); 
/* If they hit "enter" on the button */ 
$('#button1').on('keyup', function(e) { 
    if (e.which === 13) { 
     moveToNextInputField(); 
    } 
}); 
/* Capture keyboard input to limit to Numbers */ 
$('input').on('keydown', function (e) { 
    switch(e.which) { 
     case 48: 
     case 49: 
     case 50: /* All numbers, or wanted keys, etc.... */ 
      $(this).data('changed', true); 
      break; 
     default: 
      e.preventDefault(); /* prevent other unwanted keys from doing anything */ 
      break; 
    } 
}); 
/* Capture keyboard input for keyboard navigation */ 
$('input').on('keyup', function (e) { 
    switch (e.which) { 
     /* other cases to do stuff excluded */ 
     case 13: 
      moveToNextInputField(); 
      break; 
    } 
}); 

Проблема, которую я имею, что в Firefox и IE10 (возможно, другие), Когда я выбираю кнопку и нажимаю «ENTER», она вызывает 2 события. Первое событие перемещает фокус в следующее поле, а второе делает то же самое. Похоже, я не могу достаточно быстро нажать клавишу «ENTER». Когда я запускаю этот код и нажимаю «enter» на кнопке, я заканчиваю поле2.

Итак, на мой вопрос: возможно ли «заблокировать» событие, чтобы оно запускало только одно событие вместо нескольких?

В качестве побочного примечания, если есть лучший способ сделать это, я все уши.

---

Решение:

Я нашел мой ответ был сочетание вещей рекомендуется.

1. Я избавился от $ ('# button1'). On ('keyup' ....). Это было излишним.
2. Я добавил e.stopImmediatePropigation() в пределах функции $ ('# button'). Click (...). Это решило мою проблему.

Вот что решение, которое работало выглядит следующим образом:

/* If they click the button or press ENTER while focused */ 
$('#button1').on('click', function(e) { 
    e.stopImmediatePropigation(); 
    moveToNextInputField(); /* <-- Mystical function to "focus" the next input */ 
}); 

/* Capture keyboard input to limit to Numbers */ 
$('input').on('keydown', function (e) { 
    switch(e.which) { 
     case 48: 
     case 49: 
     case 50: /* All numbers, or wanted keys, etc.... */ 
      $(this).data('changed', true); 
      break; 
     default: 
      e.preventDefault(); /* prevent other unwanted keys from doing anything */ 
      break; 
    } 
}); 
/* Capture keyboard input for keyboard navigation */ 
$('input').on('keyup', function (e) { 
    switch (e.which) { 
     /* other cases to do stuff excluded */ 
     case 13: 
      moveToNextInputField(); 
      break; 
    } 
}); 

Спасибо всем за помощь .. Надеюсь, что это помогает кто-то другой тоже. Приветствия.

Answer 1

Это легко, когда вы фокусируетесь на кнопке и нажимаете кнопку ввода, срабатывают обработчики событий щелчка и клавиш.

Другими словами, сосредоточившись на кнопку и нажать войти вызовет событие щелчка на кнопке, так это изменить:

$('#button1').on('click', function() { 
    moveToNextInputField(); /* <-- Mystical function to "focus" the next input */ 
}); 

$('#button1').on('keyup', function(e) { 
    if (e.which === 13) { 
     moveToNextInputField(); 
    } 
}); 

просто:

$('#button1').on('click', function() { 
    moveToNextInputField(); /* <-- Mystical function to "focus" the next input */ 
}); 

в качестве обработчика KeyUp событий является не нужно.

FIDDLE

как заметка на полях, вы могли бы сократить, что:

$('#button1').on('click', moveToNextInputField); 

Answer 2

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

Answer 3

Вы должны заметить, что щелчок является своего рода специальное мероприятие. Он генерируется, когда функция кнопки должна быть активирована. Это происходит обычно после mousedown, ENTER или SPACE. Вы можете применить несколько решений

1. e.preventDefault в обработчике KeyUp, когда вы осознаете клавишу ENTER.
2. использовать мускулатуру вместо щелчка
3. удалить обработчик щелчков (ENTER и SPACE вызовут его).

кстати. Я также рекомендую использовать keypress not keyup - look here.