javascript - backbone.js 中的按键？

Question

貌似key-press只能在focus元素上执行？我不完全同意，必须有一种方法来执行类似于点击事件的按键事件吗？

我有一个 View 一次只能处理一个项目。我有一个 mouseenter - mouseleave 函数，它向鼠标悬停的项目添加一个类。当项目收到该类时，我希望能够使用按键事件在该项目上运行一个函数。

显然这是一个小障碍，但我想知道我需要做什么。下面是一个示例 View 。

var PlayerView = Backbone.View.extend({
    tagName: 'div',

    events: {
        'click .points, .assists, span.rebounds, span.steals':'addStat',
        'mouseenter': 'enter',
        'mouseleave': 'leave',
        'keypress': 'keyAction'
    },

    enter: function() {
        this.$el.addClass('hover');
    },

    leave: function() {
        this.$el.removeClass('hover');
    },

    keyAction: function(e) {
        var code = e.keyCode || e.which;
        if(code == 65) { 
            alert('add assist')
        }
    }
});

所以这里没有太多逻辑，但我想我会写这样的东西

    keyAction: function(e) {
        var code = e.keyCode || e.which;
        if(code == 65) { 
            var addAssist = parseInt(this.model.get('assists')) + 1;        
            this.model.save({assists: addAssist});
        }
    }

基本上，如果我能弄清楚如何触发 keyAction 方法，我就可以开始了。那么在执行这样的代码时我缺少哪些注意事项呢？我确定有一些。

我确实理解这段代码的一些问题，它无法知道我们何时在那个 View 中运行按键，我必须添加一个条件或其他东西来找到事件类，所以当我执行按键时它知道我在说什么模型，这里的描述非常模糊，但我发现有问题，我只是不确定该怎么做？

我的解决方案

initialize: function() {
    this.listenTo(this.model, "change", this.render);
    _.bindAll(this, 'on_keypress');
    $(document).bind('keydown', this.on_keypress);
},

enter: function(e) {
    this.$el.addClass('hover');
},

leave: function(e) {
    this.$el.removeClass('hover');
},

on_keypress: function(e) {
    // A for assist
    if(e.keyCode == 65) { 
        if(this.$el.hasClass('hover')) {
            var addThis = parseInt(this.model.get('assists')) + 1;        
            this.model.save({assists: addThis});
        }
    }
    // R for rebound
    if(e.keyCode == 82) { 
        if(this.$el.hasClass('hover')) {
            var addThis = parseInt(this.model.get('rebounds')) + 1;        
            this.model.save({rebounds: addThis});
        }
    }
    // S for steal
    if(e.keyCode == 83) { 
        if(this.$el.hasClass('hover')) {
            var addThis = parseInt(this.model.get('steals')) + 1;        
            this.model.save({steals: addThis});
        }
    }
    // 1 for one point
    if(e.keyCode == 49) { 
        if(this.$el.hasClass('hover')) {
            var addMake = parseInt(this.model.get('made_one')) + 1;        
            this.model.save({made_one: addMake});

            var addOne = parseInt(this.model.get('points')) + 1; 
            this.model.save({points: addOne});
        }
    }
    // 2 for two points
    if(e.keyCode == 50) { 
        if(this.$el.hasClass('hover')) {
            var addMake = parseInt(this.model.get('made_two')) + 1;        
            this.model.save({made_two: addMake});

            var addTwo = parseInt(this.model.get('points')) + 2; 
            this.model.save({points: addTwo});
        }
    }
    // 2 for two points
    if(e.keyCode == 51) { 
        if(this.$el.hasClass('hover')) {
            var addMake = parseInt(this.model.get('made_three')) + 1;        
            this.model.save({made_three: addMake});

            var addThree = parseInt(this.model.get('points')) + 3; 
            this.model.save({points: addThree});
        }
    }
}

这对我的应用来说很酷，因为当用户将鼠标悬停在项目上时，用户可以点击一个键来添加数据，而不是单击。

Answer 1

因此，您只能在设置了监听器(或其子元素)的任何元素中监听按键。并且只有在元素获得焦点时才会触发按键事件。所以我认为对您来说最好的解决方案是设置 focus在您悬停的元素上，然后您可以收听 keypress ，或者更好的是，听keydown因为它以更标准的方式跨浏览器运行。

这是一个演示此技术的有效 JSFiddle:http://jsfiddle.net/DfjF2/2/

只有某些表单元素接受 focus .您可以添加 contenteditable或 tabindex元素的属性，这应该允许几乎所有元素接收焦点，但是 keydown事件实际上不会被解雇!这是一个特定于浏览器的问题。根据我的经验，<span>会导致keydown和 keyup在我测试过的每个浏览器(Chrome、Firefox、IE、Safari、Android 浏览器、Silk)中触发的事件。所以在 jsfiddle 中我在目标元素中添加了一个跨度，把 focus在那上面，并添加了 keydown事件监听器。

因此，如果您添加一个空的 <span>在您看来，您的代码可能如下所示:

var PlayerView = Backbone.View.extend({
    tagName: 'div',

    events: {
        'click .points, .assists, span.rebounds, span.steals':'addStat',
        'mouseenter': 'enter',
        'mouseleave': 'leave',
        'keydown': 'keyAction'
    },

    enter: function() {
        this.$el.addClass('hover');
        var span = this.$el.find('span');
        span.attr('tabindex', '1').attr('contenteditable', 'true');
        span.focus();
    },

    leave: function() {
        this.$el.removeClass('hover');
        var span = this.$el.find('span');
        span.removeAttr('contenteditable').removeAttr('tabindex');
        span.blur();
    },

    keyAction: function(e) {
        var code = e.keyCode || e.which;
        if(code == 65) { 
            alert('add assist')
        }
    }
});