Question

我已经（!!）检查了这个精彩的网站数据库并以某种方式提供了答案对我不起作用。

为防止毛刺，默认情况下我必须禁用箭头键和空格键。这适用于这个优秀的代码：

window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

但是网站的某些区域（输入和文本区域）需要箭头键和空格键。为了允许，我做了如下：

window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) && ($(event.target)[0]!=$("textarea, input")[0])) {
        e.preventDefault();
    }
}, false);

但它似乎不起作用。我做错了什么？

Answer 1

在这种情况下，您有一个选项是为所有textarea和input元素设置事件处理程序并使用event.stopPropagation()以防止触发窗口事件处理程序。有了这个，元素捕获keydown事件，然后告诉JavaScript引擎不要触发DOM链中更高元素的其他事件处理程序（例如文档或窗口）。

window.addEventListener("keydown", function(e) {
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

使用jQuery：

// Function gets run after document is loaded
$(function(){
   $("textarea, input").keydown(function(e){
      e.stopPropagation()
   })
});

修改：工作jsFiddle.

Answer 2

您可以使用nodeName属性获取目标元素名称：

var targettedElement = $(event.target)[0].nodeName.toLowerCase(); // its uppercase by default

然后你可以用它来有条不紊地检查：

window.addEventListener("keydown", function(e) {
    var targettedElement = $(event.target)[0].nodeName.toLowerCase();
    if(
        [32, 37, 38, 39, 40].indexOf(e.keyCode) > -1
        && targettedElement != 'textarea'
        && targettedElement != 'input'
    ) {
        e.preventDefault();
    }
}, false);

Fiddle

禁用某些键，但不用于textarea和输入

2 个答案: