如何停止干扰表单字段的 keydown 事件？答案

【问题标题】：How do I stop a keydown event interfering with form fields?如何停止干扰表单字段的 keydown 事件？
【发布时间】：2010-08-05 13:34:27
【问题描述】：

我已经将一些事件绑定在左右箭头键按下时发生，如下所示：

$(document).keydown(function(e) {
    switch(e.which) {
        case 39: $("#next").trigger('click');
        break;

        case 37: $("#prev").trigger('click');
        break;              
    }
});

但是，显然，如果您在表单中并按左右键在文本中移动，这些事件就会触发。

我该如何改变它，以免发生这种情况？

【问题讨论】：

你到底想要发生什么？

标签： jquery keypress keydown

【解决方案1】：

您可以检查事件的目标 (more information here)

$(document).keydown(function(e) {
    //var target = (e.target) ? e.target : e.srcElement; // IE uses srcElement
    // jQuery seems to handle this, so e.target should be fine

    if(e.target.nodeName != 'INPUT') {
        switch(e.which) {
            case 39: $("#next").trigger('click');
            break;

            case 37: $("#prev").trigger('click');
            break;              
        }
    }
});

或者您可以通过将事件处理程序附加到输入元素来防止事件冒泡：

$('input').keydown(function(e) {
    e.stopPropagation();
});

更新：

同样，您可能想要测试TEXTAREA 的节点名称。

这里是一个例子：http://jsfiddle.net/86CKw/1/

【讨论】：

【解决方案2】：

这是我能找到的最优雅的解决方案：

$(document).ready(function() {
  $(document).keypress(function() {
    if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) || event.target.type === "text") ) {
      return;
    }

    // deal with the events here
    ...

  }); 
});

【讨论】：

【解决方案3】：

if (e.target.closest('form').length===0) {
    // keypress did not occur inside a form. handle it.
}

【讨论】：