特定条件下的 jQuery 按键处理程序

Question

我有一个网页，里面有很多“窗口”，这些窗口没有包含在 iframe 或任何愚蠢的东西中。每个“窗口”都是自己的“应用程序”。

其中一个应用程序中有大量的 DOM 元素。我想将一个侦听器绑定到 该应用程序，该应用程序包含在一个 DIV 中，并希望捕获一些热键按下，例如左右箭头。

但是，如果某些真正值得关注的元素（例如此应用程序内部的输入）获得左键或右键，我想忽略它。

问题：

• 上面的意思是我只想捕捉 DIV 上的按键，基本上。我可以添加一个 tabindex，但是如果有人在该应用程序中单击，该 div 不会自行聚焦，所以我不知道该怎么做：

---

<div class='app-wrapper' tabindex='1'><!-- behold ye content --></div>

$('.app-wrapper').on('keypress', function(){
  // ... I dont think this will work.
});

---

• 我不会告诉我的应用程序中的每个有效输入/文本区域停止在按键上传播。

---

有没有什么好的解决方案可以在没有大量黑客工作的情况下实现上述目标？

Answer 1

您可以在侦听器函数中查看e.target：

$('.app-wrapper').on('keypress', function(e){
    if(e.target.tagName === 'DIV'){ //Or, more jQuery-esque: $(e.target).is('div')
         console.log("Wooo, I'm totally a div. Let's do stuff");
    }
});

通过这种方式，您可以忽略在“有效”元素中触发的按键。

Answer 2

好的，我设法弄明白了。

我的第一个投诉实际上确实有效，然后再加上 $(element)[0].nodeName，它处理了后一个投诉：

HTML

<div class='app-wrapper'><!-- behold ye content --></div>

JS

$('.app-wrapper').attr('tabindex', 1);

$('.app-wrapper').on('keypress', function(e){

  var nodeName = $(e.target)[0].nodeName;
  if (nodeName == 'INPUT' || nodeName == 'TEXTAREA') {

    // bug off...
    return;
  }

  // handle key press now.
});