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

Question

例如，考虑TodoMVC app。

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

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

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

当escape键被按下时如何做一些事情，而不运行模糊事件功能？

---

views/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;
},
...