javascript - 按键事件触发多个事件

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”时，我最终进入了 field2。

那么我的问题是:是否可以“锁定”一个事件，使其只触发 1 个事件而不是多个事件？

顺便说一下，如果有更好的方法来做到这一点，我会洗耳恭听。

---

解决方案:

我发现我的答案是推荐内容的组合。

1. 我确实摆脱了 $('#button1').on('keyup'....)。这是多余的。
2. 我在 $('#button').click(...) 函数中添加了 e.stopImmediatePropigation() 。这解决了我的问题。

下面是有效的解决方案:

/* 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

这很简单，当聚焦按钮并单击 enter 时，click 和 keyup 事件处理程序都会触发。

换句话说，聚焦一个按钮并按下回车将触发按钮上的点击事件，所以改变这个:

$('#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);