Warum Tastendruckereignis nicht funktioniert?

Question

bitte helfen, das Problem zu lösen. Ich mache eine Vorlage, zeige sie an und führe sie aus.

html:

<div class="space" id="space"></div> 

TPL:

<script type="text/template" id="spaceTpl"> 
    <div class="container main_container"> 
    <div class="row"> 
    gfdgdfgdfg<br>gfdgdfgdfg<br>gfdgdfgdfg<br>gfdgdfgdfg<br>gfdgdfgdfg<br>gfdgdfgdfg<br>gfdgdfgdfg<br>gfdgdfgdfg<br> 
    </div>  
    </div> 
</script> 

Ansicht:

window.APP = window.APP || {}; 
APP.SpaceView = Backbone.View.extend({ 

    initialize: function() { 
    this.render(); 
    },  

    template: _.template($('#spaceTpl').html()), 

    render: function() {  
    this.$el.html(this.template()); 
    return this; 
    }, 

    events: { 
    'click': 'move', 
    'keypress': 'move', 
    'keydown': 'move' 
    }, 

    move: function(e) { console.log(222) 
    var code = e.keyCode || e.which; 

    if (code === 13) { 
     console.log('sdsd'); 
    } 
    }  

}); 

INIT:

var app = new APP.SpaceView({el: '#space'}); 

benötigt nach dem Drücken einer beliebigen Taste in der Konsolenanzeige '222'. aber nichts passiert.

, d. H. Keypress-Handler wurde nicht bearbeitet. Warum??

https://jsfiddle.net/9t1cwfrv/16/

Answer 1

Es funktioniert, wenn Sie es sich auf einem fokussierten Element zu verwenden. Wenn Sie nicht fokussieren möchten, können Sie es unter body Element oder document verwenden.

Demo: https://jsfiddle.net/9t1cwfrv/21/

Answer 2

keypress und keydown wird nicht funktionieren, wenn das Element fokussiert nicht.

Es macht Sinn, in einem Eingang, oder Sie versuchen, es auf dem Dokumentelement nach oben einstellen können:

$(document).on('keypress', function(e){ 
    var code = e.keyCode || e.which; 
    console.log(e, code); 
}); 

Backbone input Beispiel:

var Input = Backbone.View.extend({ 
 
    tagName: 'input', 
 
    events: { 
 
    'keypress': 'press' 
 
    }, 
 
    press: function(e){ 
 
    var code = e.keyCode || e.which; 
 
    console.log(code); 
 
    } 
 
}); 
 

 
(new Input()).$el.appendTo(document.body);

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js'></script>

Answer 3

in Ihrer Vorlage Satz tabindex="1"

<div class="container main_container" tabindex="1" >

https://jsfiddle.net/4ga489zy/1/