backbone.jsのKeypress？

Question

キー押しがフォーカス要素でのみ実行できるように見えますか？私は完全にそれを購入していない、クリックイベントに似たキープレスイベントを実行する方法がある必要がありますか？

私は一度に1つのアイテムで動作するビューを持っています。私はmouseenter - mouseleaveという機能を持っていて、マウスが上にある項目にクラスを追加します。アイテムがそのクラスを受け取ると、そのアイテムに対して関数を実行するためにキー押しイベントを使用できるようにしたいと考えています。

明らかにこれはわずかな障害ですが、IDは私が何をする必要があるかを知りたいと思っています。以下はその例です。

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方法を発射する方法を見つけ出すことができれば、私はこの

基本的に

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}); 
     } 
    } 

ような何かを書くだろうと考えています行く。では、このようなコードを実行する際に欠けている注意点は何ですか？私はいくつかあると確信しています。

私はこのコードで何が間違っているのか理解していますが、そのビューでkeypressを実行するときを知る方法がないため、条件付きのものやアクティブなクラスを見つけるためのものを追加する必要があります。 keypressそれは私が話しているモデル、ここでは非常に曖昧な記述を知っているが、私はそこに何か間違っている私はこれを行う方法がわからないのですか？

私のソリューション

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を聞くことができる、またはより良いですが、​​を聞くことです。 http://jsfiddle.net/DfjF2/2/

のみ、特定のフォーム要素がfocusを受け入れる：ここ

は、この技術を実証する作業JSFiddleです。要素にcontenteditableまたはtabindexという属性を追加すると、ほとんどの要素がフォーカスを取得できるようになりますが、​​イベントは実際には起動されません。これはブラウザ固有の問題です。私の経験上、<span>は、私がテストしたすべてのブラウザ（Chrome、Firefox、IE、Safari、Androidブラウザ、Silk）で​​とkeyupというイベントを発生させます。だからjsfiddleでは、ターゲット要素内にスパンを追加し、focusを入れ、​​イベントリスナーを追加しました。

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') 
     } 
    } 
}); 

の