Question

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

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;
}

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

Answer 1

如果你的events -hash中有一个选择器，就像这样

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

backbone.js delegateEvents使用jQuery on -function来绑定this等事件

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

但是，有一个问题，可以从on函数及其参数

上的jQuery docs找到

<强>选择

类型：字符串

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

当包含选择器时，eventhandler捕获从元素的子元素传播的事件（在这种情况下是输入）。如果没有选择器，则不会捕获事件（我使用fiddle进行演示，打开控制台并切换不同的输入）。快速玩弄我的小提琴也表明它几乎不可能被发现，或者表格没有焦点。

这就是输入字段触发blur事件的原因。至于如何检测你的表单何时失去焦点：很难说，因为浏览器自己决定，他们允许关注哪些元素。以下是我发现的一些stackoverflow源代码，但未能在小提琴中工作：

Using jQuery to test if an input has focus

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

OnBlur无法正常工作

1 个答案: