1

我正在使用带骨干的模糊动作。在我的主干视图中，我有

var EventView = Backbone.View.extend({

    tagName:  "li",

    template: _.template($('#item-template').html()),

    events: {
      "click .toggle"   : "toggleDone",
      "dblclick .view"  : "edit",
      "click a.destroy" : "clear",
      "keypress .edit"  : "updateOnEnter",
      "blur .edit"      : "close"
    },

    initialize: function() {
      this.listenTo(this.model, 'change', this.render);
      this.listenTo(this.model, 'destroy', this.remove);
    },

    render: function() {
      this.$el.html(this.template(this.model.toJSON()));
      this.$el.toggleClass('done', this.model.get('done'));
      this.form = this.$(".edit");
      this.input = this.$(".edit-title");
      this.eventLeaders = this.$('.edit-leaders');
      this.eventDescription = this.$('.edit-description');
      return this;
    },

    toggleDone: function() {
      this.model.toggle();
    },

    edit: function() {
      this.$el.addClass("editing");
      this.form.focus();
    },

    close: function() {

      if (!this.input.val()) {
        this.clear();
      } else {
        this.model.save({
                    title: this.input.val(), 
                    description: this.eventDescription.val(),
                    leaders: this.eventLeaders.val().split(/[, ]+/)});
        this.$el.removeClass("editing");
      }
    },

    updateOnEnter: function(e) {
      if (e.keyCode == 13) this.close();
    },

    clear: function() {
      this.model.destroy();
    }

});

在我的 HTML 中，我有：

  <script type="text/template" id="item-template">
    <div class="view">
      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
      <label><%- title %></label>
      <div class="details">
        <span class="description"><p><%- description %></p>Leaders:</span>
        <% _.each(leaders, function(leader){ %>
          <span class="event-leader"> <%= leader %> </span>
        <% }); %>
      </div>
      <a class="destroy"></a>
    </div>
    <form class="edit">
      <input class="edit-title" type="text" value="<%- title %>" />
      <input class="edit-description" type="text" value="<%- description %>" />
      <input class="edit-leaders" type="text" value="<%= leaders.join(', ') %>" />
    </form>
  </script>

在我的 CSS 中，我有：

#event-list li.editing .edit {
    display: block;
    width: 444px;
    padding: 13px 15px 14px 20px;
    margin: -30px;
}

#event-list li.editing .view {
    display: none;
}
#event-list li .edit {
    display: none;
}

我遇到的问题是当我在编辑不同的文本框之间切换时会触发模糊事件，但我不知道为什么。即使我使用制表符在文本框之间切换。我不希望这是默认行为。我怎样才能改变这个？

4

1 回答 1

1

如果您的events-hash 中有这样的选择器

'blur <the event designator> .edit <the selector>': 'onBlur'

主干.jsdelegateEvents使用 jQuery on-function 来绑定这样的事件

this.$el.on(eventName, selector, method);

但是，有一个问题，可以从-function 及其参数的 jQuery文档中找到on

选择器

类型：字符串

一个选择器字符串，用于过滤触发事件的选定元素的后代。如果选择器为 null 或省略，则始终在到达所选元素时触发事件。

不知何故，当包含选择器时，事件处理程序会捕获从元素的子元素（在本例中为输入）传播的事件。没有选择器，事件不会被捕获（我做了一个小提琴来演示，打开你的控制台并切换不同的输入）。快速玩弄我的小提琴也表明几乎不可能检测到表格是否有焦点。

This is why the blur event is triggered by the input fields. As to how to detect when your form loses focus: it is hard to say, because browsers decide for themselves, which elements they allow focus to be given to. Here are some stackoverflow sources i found, but failed to get to work in the fiddle:

Using jQuery to test if an input has focus

When onblur occurs, how can I find out which element focus went *to*?

于 2013-03-05T23:05:17.573 回答