当在输入字段上按下转义键而不是在该输入字段的模糊事件上按下转义键时，您该怎么做？

Question

例如，考虑TodoMVC 应用程序。

我正在编写该应用程序的我自己的版本。当您双击待办事项时，会显示一个输入字段。

当该输入字段模糊时，我想保存更改。但如果用户进行更改然后按escape，我不想保存更改。

问题是按下escape输入字段上的按键会触发模糊事件。因此，当我按下 escape 时，监听escape按键的函数就会运行......但是监听模糊事件的函数也会运行。

当按下按键时，我该如何做一些事情escape，而不运行模糊事件函数？

---

视图/todo.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();
    }
  }
});

Answer 1

当按下 Esc 时，您可以在处理程序内设置一些布尔标志keypress，然后在blur处理程序内检查它：

...
events: {
  ...
  "keypress .edit"  : "keypress",
  "blur .edit"      : "blur"
},
...
close: function() {
  ...
},
blur: function() {
  if (!this.escFlag) this.close();
  this.escFlag = false;
},
keypress: function(e) {
  if (e.keyCode == 27) this.escFlag = true;
},
...