按键事件无效的原因
why keypress event is not worked?
请帮助解决问题。我制作模板,查看并运行它们。
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'});
按下控制台显示屏"222"中的任意键后需要。但什么也没发生。
即按键处理程序不工作。为什么?
https://jsfiddle.net/9t1cwfrv/16/
如果您将其设置为在聚焦元素上使用,它就会起作用。如果您不想聚焦,可以在body
元素或document
上使用它。
演示:https://jsfiddle.net/9t1cwfrv/21/
在您的模板集tabindex="1"
中
<div class="container main_container" tabindex="1" >
https://jsfiddle.net/4ga489zy/1/
keypress
和keydown
在元素未聚焦的情况下将不起作用。
它在输入中是有意义的,或者你可以尝试在文档元素上设置它:
$(document).on('keypress', function(e){
var code = e.keyCode || e.which;
console.log(e, code);
});
主干input
示例:
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>
相关文章:
- 分派点击事件并保留击键修饰符
- 模糊事件的Javascript测试
- keyup事件处理程序更改焦点不适用于快速键入
- 按键事件无效的原因
- 对象 Javascript 中的标签无效 - 想要添加事件列表器
- 为左键或右键单击附加事件侦听器-onclick'右键单击无效
- 为什么document.ready中的事件处理程序函数有效但无效;取出后不起作用
- 捕获事件或异常“无效表单控件”
- 尝试在状态“root.loaded.saved”中处理事件“成为无效”
- 在项视图中不会触发无效的模型事件
- onKeyUp事件(无效)
- Hammer.js:滑动事件对图像无效
- 为什么在使用事件冒泡时没有调用无效事件的事件侦听器
- Return false对第二个onclick切换事件无效
- 输入字段模糊时,验证字段,如果无效则取消模糊事件
- onblur事件不'如果用户在文本字段中输入值并直接按下浏览器刷新按钮,则无效
- 为什么jquery点击事件在plunker中有效,但在任何浏览器中都无效
- 如何处理从backbone.js中的collection.create()触发的多个无效事件
- Onhashchange事件导致无效的标记验证
- Firebase child_added事件返回无效路径错误