backbone.js 点击和模糊事件

Question

我在主干中的模糊和点击事件方面遇到了一些麻烦。我有一个视图（下面的代码），它创建一个带有按钮的小搜索条目 div。我弹出这个 div 并将焦点放在输入字段上。如果有人点击关闭（模糊），我会通知父视图关闭此视图。如果他们点击按钮，我将启动搜索。

模糊行为工作正常，但是当我单击按钮时，我也会收到模糊事件，并且无法获取单击事件。我的结构正确吗？

顺便说一句，其他一些帖子提出了一些建议，例如向 div 添加计时器，以防在单击事件触发之前关闭它。我可以完全注释掉关闭，但仍然只能得到模糊事件。这些是否按照先到先得的原则一次只发射一个？

PB_SearchEntryView = Backbone.View.extend({
    template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
    events: {
        "click button": "find",
        "blur #part": "close"
    },
    initialize: function(args) {
        this.dad = args.dad;
    },
    render: function(){
        $(this.el).html(this.template());
        return this;
    },
    close: function(event){ this.dad.close(); },
    find: function() {
        alert("Find!");
    }
});

Answer 1

我不确定问题是什么，但这是 jsbin 代码。

Answer 2

尽管这个问题已经有 11 年了，但使用当前版本的 Backbone、Underscore 和 jQuery 仍然有可能遇到这种情况，并且解决方案也仍然相同。

让我们从在可运行代码片段中重现问题开始。下面，我复制了问题中的代码并添加了一些模拟代码。要重现，请单击“运行代码片段”，然后通过单击内部手动聚焦文本输入，然后单击按钮。您将看到输入字段和按钮再次消失，并且 alert('Find!') 行不会运行：

var PB_SearchEntryView = Backbone.View.extend({
    template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
    events: {
        "click button": "find",
        "blur #part": "close"
    },
    initialize: function(args) {
        this.dad = args.dad;
    },
    render: function(){
        $(this.el).html(this.template());
        return this;
    },
    close: function(event){
        this.dad.close();
    },
    find: function() {
        alert("Find!");
    }
});

var MockDadView = Backbone.View.extend({
    initialize: function() {
        this.search = new PB_SearchEntryView({
            dad: this
        }).render();
    },
    render: function() {
        this.$el.append(this.search.el);
        return this;
    },
    close: function() {
        this.search.remove();
    }
});

var view = new MockDadView().render();
view.$el.appendTo(document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone-min.js"></script>

理由如下。用户的操作通常会触发许多不同类型的事件。在这种情况下，单击按钮可能会触发以下所有事件：

1. 元素上的 blur。
2. 元素上的 change（仅当用户在单击按钮之前输入内容时；换句话说，如果 blur 之前有一个 input 事件）。
3. 元素上的 mousedown。
4. 元素上的 mouseup。
5. 单击 元素。
6. 父
   
   元素上的 submit（如果有）（因为我们没有设置 的 type 属性） <按钮>，默认为提交）。

上述顺序是标准化的，因为该顺序对于实现用户友好的交互表单最有用。特别是， 上的 blur 和 change 在 上的任何事件之前触发，因为这些事件可能是在采取进一步的表单处理步骤之前验证用户输入的好机会。同样， 事件在整个

的 submit 之前触发，因为您可能想要执行最终的整体 -在最终实际提交表单之前进行表单验证或其他预处理。

浏览器立即调用这些事件的处理程序，并且允许在触发下一个用户事件之前完全展开调用堆栈。这就是 JavaScript 著名的事件循环。因此，当我们单击上面有问题的代码片段中的按钮时，会发生以下情况：

1. blur 事件触发。
2. 我们的 PB_SearchEntryView 实例的 close 方法被调用。
3. 我们的 MockDadView 的 close 方法被调用。
4. 调用 PB_SearchEntryView 实例的 remove 方法。
5. 我们的 PB_SearchEntryView 实例的 HTML 元素已从 DOM 中删除，并且其事件绑定也已删除（这是 remove 原型方法的默认行为Backbone.View）。
6. 上面调用的方法以相反的顺序返回。

上的 click 事件永远不会被触发，因为该元素已在第 5 步中从 DOM 中删除。

（即使 click code> 事件在步骤 7 中被触发，我们的 PB_SearchEntryView 实例的 find 方法仍然不会被调用，因为事件绑定在步骤 5 中被撤消。）

因此，如果我们仍然想要find 方法在处理 blur 后被调用，我们需要防止同时调用 remove 方法。一种简单有效的方法是延迟对 this.dad.close 的调用。合适的延迟约为50毫秒；这足够长以确保首先触发 的 click 事件，并且足够短以至于用户不会注意到它。我们甚至可以取消延迟调用，以便在单击按钮时保持搜索视图打开。在下面的代码片段中，我更改了 close 和 find 方法来说明如何完成此操作，并添加注释来解释其机制：

var PB_SearchEntryView = Backbone.View.extend({
    template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
    events: {
        "click button": "find",
        "blur #part": "close"
    },
    initialize: function(args) {
        this.dad = args.dad;
    },
    render: function(){
        $(this.el).html(this.template());
        return this;
    },
    close: function(event){
        // Short way to refer to this.dad.
        var dad = this.dad;
        // The method of this.dad we want to be
        // invoked later. When saving it to a
        // variable, we need to bind it so that
        // the `this` variable points to this.dad
        // when it is invoked.
        var askDadToClose = dad.close.bind(dad);
        // Invoke dad's close method with a 50 ms
        // delay. Save a handle that enables us
        // to cancel the call in the find method.
        this.willClose = setTimeout(askDadToClose, 50);
    },
    find: function() {
        alert("Find!");
        // If you still want the search view to
        // close after performing the search,
        // remove the `if` block below.
        if (this.willClose != null) {
            clearTimeout(this.willClose);
            delete this.willClose;
        }
    }
});

var MockDadView = Backbone.View.extend({
    initialize: function() {
        this.search = new PB_SearchEntryView({
            dad: this
        }).render();
    },
    render: function() {
        this.$el.append(this.search.el);
        return this;
    },
    close: function() {
        this.search.remove();
    }
});

var view = new MockDadView().render();
view.$el.appendTo(document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone-min.js"></script>

奖励材料

该问题还询问代码的结构是否正确。下面是该代码段的第三个版本，其中我做了三项我认为会有所改进的更改：

1. 子视图 (PB_SearchEntryView) 不再了解其父视图。它不是调用父级的方法，而是简单地触发一个事件。由应用程序的其他组件来侦听该事件并处理它。这减少了组件的耦合，通常使应用程序更易于测试和维护。 （对于长距离通信的松耦合，我建议使用 backbone.radio。）
2. 不要侦听 上的 click 事件，而是侦听
   
   < 上的 submit 事件/代码>。当提交表单正是我们正在做的事情时，这更加语义化并且更合适。这还使用户能够通过在 元素中键入内容时按返回键来触发相同的事件处理程序。这确实要求
   位于 元素内，这就是我们将 tagName 设置为表单的视图。
3. 让视图负责渲染本身。一般来说，视图本身最清楚何时更改其内部 HTML 结构，并且通常是在首次创建视图时以及每当其模型或集合更改（如果有）时。让外部组件负责渲染通常是一种反模式，除非渲染非常昂贵（例如渲染地图或复杂的可视化）。

var PB_SearchEntryView = Backbone.View.extend({
    // This is a form, so it can be submitted.
    tagName: 'form',
    template: _.template("<div id='searchEntry' class='searchEntry'><input id='part'></input><button id='findit'>Search</button></div>"),
    events: {
        // Handle submit rather than a button click.
        "submit": "find",
        "blur #part": "close"
    },
    initialize: function(args) {
        // self-render on initialize
        this.render();
    },
    render: function(){
        this.$el.html(this.template());
        return this;
    },
    close: function(event){
        // Like before, we save a method for later,
        // but this time it is our own trigger
        // method and we bind two additional
        // arguments. This view does not need to
        // know what happens with its 'close' event.
        var triggerClose = this.trigger.bind(this, 'close', this);
        // Delay as before.
        this.willClose = setTimeout(triggerClose, 50);
    },
    find: function(event) {
        // Since this is now a proper submit
        // handler, we need to prevent the default
        // behavior of reloading the page.
        event.preventDefault();
        alert("Find!");
        if (this.willClose != null) {
            clearTimeout(this.willClose);
            delete this.willClose;
        }
    }
});

var MockDadView = Backbone.View.extend({
    initialize: function() {
        // This view owns an instance of the above
        // view and knows what to do with its
        // 'close' event.
        this.search = new PB_SearchEntryView();
        this.search.on('close', this.close, this);
        // self-render on initialize
        this.render();
    },
    render: function() {
        this.$el.append(this.search.el);
        return this;
    },
    close: function() {
        this.search.remove();
    }
});

var view = new MockDadView();
view.$el.appendTo(document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/backbone-min.js"></script>

使用上面的代码片段有一个轻微的问题，至少在 Safari 中是这样：如果我通过更改返回键来提交表单，find 方法仍然会被调用，但表单也会被删除。在这种情况下，我怀疑 Safari 在关闭警报后触发了新的 blur 事件。解决这个问题就足以解决另一个问题了！