Question

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

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

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

问题：

以上意味着我只想在DIV上捕获按键，基本上。我可以添加一个tabindex，但是如果有人在该应用程序中点击，div就不会集中注意力，所以我不知道该怎么做：

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

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

我不会告诉我的应用中的每一个有效输入/ textarea都停止在按键上传播。

在没有重大黑客工作的情况下，有没有很好的解决办法来实现上述目标？

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

好的，我设法搞清楚了。

我的第一个投诉确实最终起作用，然后加上$（元素）[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.
});

在某些条件下jQuery keypress处理程序

问题：

2 个答案:

HTML

JS