例如,考虑TodoMVC应用程序。
我正在编写我自己的版本的应用程序。当你双击一个待办事项时,一个输入字段就会出现。
当输入字段模糊时,我想保存更改。但如果用户进行了更改,然后按下escape,我不想保存更改。
问题是在输入字段上按下escape键会触发一个blur事件。所以当我按下escape键时,我所拥有的监听escape键按下的函数会运行...但监听blur事件的函数也会运行。
当按下退出键时,我如何做一些事情,而不运行模糊事件功能?
查看次数/待办事项.js
var app = app || {};
app.TodoView = Backbone.View.extend({
tagName: 'li',
className: 'list-group-item',
template: _.template( $('#todo-template').html() ),
render: function() {
this.$el.html( this.template(this.model.toJSON()) );
this.$el.find('.edit-mode').hide();
this.$el.find('.remove-todo').hide();
return this;
},
events: {
'click input[type="checkbox"]': 'check',
'mouseenter': 'showRemove',
'mouseleave': 'hideRemove',
'click .remove-todo': 'remove',
'dblclick .todo-title': 'showEditMode',
'keyup input.edit-todo': 'updateOnEnter',
'blur input.edit-todo': 'closeAndUpdate'
},
initialize: function() {
this.listenTo(this.model, 'change', this.render);
},
check: function(e) {
this.model.save({
completed: true
});
},
showRemove: function(e) {
$(e.currentTarget).find('.remove-todo').show();
},
hideRemove: function(e) {
$(e.currentTarget).find('.remove-todo').hide();
},
remove: function(e) {
var $el = $(e.currentTarget);
this.model.destroy({
success: function(model) {
app.todos.remove(model);
$el.closest('li').remove();
},
error: function() {
alert('Unable to remove todo.');
}
});
},
showEditMode: function(e) {
var $el = $(e.currentTarget);
var $editMode = $el.closest('li').find('.edit-mode');
$el.closest('.view-mode').hide();
$editMode.show();
$editMode.find('.edit-todo').focus();
},
updateOnEnter: function(e) {
if (e.which === 13) {
this.closeAndUpdate();
}
else if (e.which === 27) {
this.closeEditMode();
}
},
closeEditMode: function() {
var $input = this.$el.find('.edit-todo');
$input.closest('li').find('.view-mode').show();
$input.closest('.edit-mode').hide();
},
closeAndUpdate: function() {
var self = this;
var $input = this.$el.find('.edit-todo');
var newTitle = $input.val();
if (newTitle !== this.model.get('title')) {
this.model.save({
title: newTitle
}, {
success: function(model) {
self.closeEditMode();
},
error: function() {
alert('Unable to update todo');
}
});
}
else {
this.closeEditMode();
}
}
});
1条答案
按热度按时间kgsdhlau1#
当按下Esc键时,您可以在
keypress
处理程序中设置一些布尔标志,然后在blur
处理程序中检查它: