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个事件而不是几个事件？

作为旁注，如果有更好的方法可以做到这一点，我全都听见了。

解决方案：

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

我确实摆脱了$（'＃button1'）。on（'keyup'....）。这是多余的。
我在$（'＃button'）中添加了e.stopImmediatePropigation（）。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

这很容易，当聚焦按钮并单击回车时，点击和键盘事件处理程序都会触发。

换句话说，聚焦按钮并按下Enter将触发按钮上的点击事件，因此请更改：

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

您必须注意点击是一种特殊事件。必须触发按钮功能时生成。所以它通常发生在mousedown，ENTER或SPACE之后。您可以应用一些解决方案

e.preventDefault在keyUp处理程序中。
使用mousedown而不是单击
删除点击处理程序（ENTER和SPACE将触发它）。

顺便说一句。我还建议使用按键而不是键盘 - look here。

Answer 3

您可以尝试jQuery延迟这样做。无论哪个先发生，您都可以将延迟对象设置为已解决。您可以检查对象的状态，以查看它是否等待第一次激活而不是已经解决。

Keypress事件触发了几个事件

3 个答案: