Backbone.js - 在视图处于活动状态时添加 keydown 事件？

Posted 2023-02-26

【中文标题】Backbone.js - 在视图处于活动状态时添加 keydown 事件？

【英文标题】：Backbone.js - Adding keydown events when view is active?

【发布时间】：2011-08-18 09:43:23

【问题描述】：

我有一个名为画廊的视图选项。我想在呈现画廊时收听并处理 keydown 事件（直到它关闭）。

如何在主干事件中做到这一点？我已经尝试了 'keydown X':function 的所有变体，但都没有奏效。

【问题讨论】：

您的图库是主干视图还是独立的 html + js？

向我们展示您的 keydown 事件选择器...我认为您将它们绑定到错误的元素

只是：事件： 'keypress':'doThis'

没有选择器。听任何按键。

尝试渲染绑定事件到$(document)和.remove() make unbind()

【参考方案1】：

我刚刚测试了以下内容，它完美无缺：

var view = Backbone.View.extend(
  // ... snip ...
  events: 
    'keyup :input': 'logKey'
    ,'keypress :input': 'logKey'
  
  ,logKey: function(e) 
    console.log(e.type, e.keyCode);
  
);

我会回去检查您的代码。 Backbone 中的所有事件都定义为附加到viewInstance.el 元素的委托。要取消绑定事件，请调用 viewInstance.remove()，它会在后台调用 $(viewInstance.el).remove() 并清理所有委托事件。

另请注意，在某些浏览器（我相信是 Firefox）中，存在一个已知问题，即某些键（如箭头键）不会冒泡，并且无法与委派的 keypress 事件一起正常工作。如果您要捕获特殊键，最好使用keyup 和keydown。

【讨论】：

这不是假设有问题的视图包含输入吗？我认为 OP 是在询问仅渲染特定视图的情况 - 想象有一个灯箱图像或其他东西，并且您想连接“Escape”以关闭图像......

你是对的。我的解决方案假设有输入元素。如果您想对视图中任何位置的关键事件采取行动，您只需排除选择器（如 Backbone 文档所述）。 events: keyup: 'logKey'

- 我无法让这些全局按键/keyup/keydown 工作。还有其他一些我必须忘记的小细节吗？您能否指出一个参考，甚至是一个小提琴，以获取有关文档范围事件的更多信息