如何从视图中捕获关键事件？

Posted 2023-02-19

【中文标题】如何从视图中捕获关键事件？

【英文标题】：how to capture the key event from a view ?

【发布时间】：2011-08-27 08:12:39

【问题描述】：

我正在尝试从如下视图中捕获关键事件：

myView = Backbone.View.extend(

  el: $('#someDiv'),
  initialize: function()
    // initialize some subviews
  ,
  render: function()
    return this;
  ,
  events:
   'keypress #someDiv': 'showKey'
  ,
  showKey: function(e)
    console.log(e.keyCode);
  
)

这样不行吗？

ps：视图或其子视图中没有 [input] 元素。我只需要知道用户是否按下了任何键，然后在视图上执行某些操作。

【问题讨论】：

我使用了你的代码和工作，你唯一需要记住的是你要添加事件的元素必须在“查看 el”中，例如你要附加事件的元素必须在“#someDiv”内

【参考方案1】：

您可以在视图的 initialize() 函数中执行此操作：

_.bindAll(this, 'on_keypress');
$(document).bind('keypress', this.on_keypress);

【讨论】：

今天刚刚发现：如果您的按键在 chrome 中不起作用，请使用“keydown”事件而不是按键。

小心将按键绑定到文档，当您删除视图时，它不会与其余事件解除绑定。当您删除视图时，还要调用： $(document).unbind('keypress', 'on_keypress');

当我删除我的视图时，我不得不做$(document).unbind('keypress', this.on_keypress)。几乎就像 MrGrigg 的回答，但传递的是实际函数，而不是其名称的字符串。

【参考方案2】：

按下的键会转到页面上的焦点元素。如果您的视图中没有任何内容并且视图没有任何焦点，那么您将不会有任何按键事件。

（顺便说一句，如果您想为 this.el 执行按键事件，请执行“keypress”：“showKey”）

在您上面的代码中，主体很可能会收到所有按键事件。