Question

在我的应用程序中，我有一个包含一些设置信息的面板。点击按钮即可打开/关闭此面板，但我也希望能够通过点击键盘上的esc来关闭它。

我的View代码如下所示：

Social.MainPanelView = Ember.View.extend({
    elementId: 'panel-account-settings',
    classNames: ['panel', 'closed'],
    keypress: function(e){
        console.log(e);
        console.log('keypress');
    },
    close: function(){
        this.$().prepareTransition().addClass("closed");
    }
});

我也尝试过keyup和keydown，但没有任何反应。我怀疑这是因为这不是一个“输入”类型的视图，而只是一个标准视图。那么如何从关键事件触发View上的方法呢？

我应该澄清，这不属于这个特定要素的路线。我正在打开独立面板，如本视频所示：

http://screencast.com/t/tDlyMud7Yb7e

更新1

Here's a quick fiddle that I've created来说明我遇到的问题。我可以很容易地触发click事件，但我正在寻找一个页面宽的keyup事件，它将检测被按下的esc键并触发特定视图上的方法：

Answer 1

要使keyPress正常工作，您必须将焦点带到视图中。当它是一个输入时，它起作用，因为你将焦点带到它。

这样的事情：

App = Em.Application.create();

App.IndexController = Em.Controller.extend({
  updateKey: function(keyCode) {
    // Do what you gotta do
    this.set('shortcutKey', keyCode);
  },
  shortcutKey: null
});

App.IndexView = Em.View.extend({
  didInsertElement: function() {
    return this.$().attr({ tabindex: 1 }), this.$().focus();
  },

  keyDown: function(e) {

    this.get('controller').send('updateKey', e.keyCode);
  }
});

以下是一个工作示例：http://jsbin.com/ihuzov/1

Answer 2

我认为你拼错了按键事件。它应该是 keyPress 。为了完整起见，以下是视图可以处理的事件（取自Ember source/doc）：

活动名称

上述任何响应方法的可能事件名称是：

触摸事件：

touchStart
touchMove
touchEnd
touchCancel

键盘事件
keyDown
keyUp
keyPress

鼠标事件
mouseDown
mouseUp
contextMenu
click
doubleClick
mouseMove
focusIn
focusOut
mouseEnter
mouseLeave

表格活动：
submit
change
focusIn
focusOut
input

HTML5拖放事件：
dragStart
drag
dragEnter
dragLeave
drop
dragEnd

Ember.js：查看按键事件的监听

2 个答案:

活动名称