Javascript 如何在某些区域使用JS捕捉键盘箭头，而不是在其他区域

我在这里读到了一个很好的问题/答案：

但现在我有一个问题：虽然我可以使用箭头键在网站上的各种选择中导航，但我不能再像以前那样编辑文本框中的内容，因为我的箭头不再像我期望的那样工作了

i、 e.通过AJAX加载的第一个页面，我可以通过箭头键导航我的“选择”（即图像）。然后保存我的选择（图像），并转到第二页，该页也通过AJAX加载

但是，箭头绑定仍然有效，所以当我尝试使用Right、Left、Home、End、PgUp、PgDn箭头在文本框中导航光标，例如，纠正拼写错误时，不会发生任何情况，因为我阻止了默认行为，以避免在第1页上移动各种页面元素

有办法解决这个问题吗

我的代码：

我不确定这是否有用。。我也不知道我能帮你什么，但我想：

第1页：

    <script type="text/javascript">
    /*************************************/
    /* selection navigation via keyboard */
    /*************************************/
    $(document).keydown(function(e) {
        switch(e.which)
        {
        case 37:  $("#selectPrevious").click();break;
        case 39:  $("#selectNext").click();break;
        case 33:  $("#jump10Back").click();break;
        case 34:  $("#jump10Forward").click();break;
        case 36:  $("#jumpFirst").click();break;
        case 35:  $("#jumpLast").click();break;
        default: return;
        }
        e.preventDefault();
    });
    </script>

/*************************************/
/*通过键盘进行选择导航*/
/*************************************/
$（文档）.keydown（函数（e）{
开关（e.which）
{
案例37:$（“#选择上一步”）。单击（）；中断；
案例39:$（“#选择下一步”）。单击（）；中断；
案例33：$（“#jump10Back”）。单击（）；中断；
案例34:$（“#jump10Forward”）。单击（）；中断；
案例36:$（“#jumpFirst”）。单击（）；中断；
案例35:$（“#jumpLast”）。单击（）；中断；
默认：返回；
}
e、 预防默认值（）；
});

---

显然，当我导航到第2页时，这个密钥分配不会被删除。我不希望绑定在第2页生效。说清楚。。有一个始终处于加载状态的主页，第1页通过AJAX加载，然后被第2页通过AJAX替换。

也许您可以将事件处理程序绑定到比

文档

更具体的元素。如果AJAX加载是在两个不同的容器中完成的，即

#page1

和

#page2

，则可以将按键笔划绑定到其中一个：

$("#page1").keydown(function(e) {
    // your code
})

另一个想法是在加载第二个页面时解除事件侦听器的绑定。因此，您可以使用jQuery的或方法：

这将解除

文档

的所有键控事件的绑定。如果您想使解除绑定更加具体，那么应该从匿名处理程序函数中生成一个命名函数

function handleKeydown(e) {
    switch(e.which)
    {
    case 37:  $("#selectPrevious").click();break;
    case 39:  $("#selectNext").click();break;
    case 33:  $("#jump10Back").click();break;
    case 34:  $("#jump10Forward").click();break;
    case 36:  $("#jumpFirst").click();break;
    case 35:  $("#jumpLast").click();break;
    default: return;
    }
    e.preventDefault();
});

// Bind the handler
$(document).keydown(handleKeydown);

// Unbind the handler
if (page2) {
   $(document).unbind("keydown", handleKeydown);
}

---

来自zerkms：“只需检查事件源”

---

我检查了事件源，这对我有效。

是。我们需要查看您的代码。到目前为止你有什么？只要检查一下事件源Zerkms：这似乎有效。请随便回答

function handleKeydown(e) {
    switch(e.which)
    {
    case 37:  $("#selectPrevious").click();break;
    case 39:  $("#selectNext").click();break;
    case 33:  $("#jump10Back").click();break;
    case 34:  $("#jump10Forward").click();break;
    case 36:  $("#jumpFirst").click();break;
    case 35:  $("#jumpLast").click();break;
    default: return;
    }
    e.preventDefault();
});

// Bind the handler
$(document).keydown(handleKeydown);

// Unbind the handler
if (page2) {
   $(document).unbind("keydown", handleKeydown);
}