Question

请帮助解决问题。我制作模板，查看并运行它们。

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>

视图：

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

按下控制台显示屏中的任意键后需要

＆＃39; 222＆＃39;。但没有任何反应。

即。 keypress-handler不起作用。为什么??

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

Answer 1

模板集tabindex="1"

中的

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

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

Answer 2

如果将其设置为在焦点元素上使用，则它有效。如果您不想关注，可以在body元素或document上使用它。

演示：https://jsfiddle.net/9t1cwfrv/21/

Answer 3

如果元素没有聚焦，

keypress和keydown将无效。

在输入中有意义，或者您可以尝试在文档元素上进行设置：

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

Backbone input示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

为什么按键事件不起作用？

3 个答案: