使用backbone.js & jQuery 的事件绑定点击答案

【问题标题】：Event binding clicks with backbone.js & jQuery使用backbone.js & jQuery 的事件绑定点击
【发布时间】：2012-01-30 19:36:02
【问题描述】：

我需要在backbone.js-view 中绑定两个事件才能切换菜单。其想法是，如果单击 id 为 #toggler 的按钮，则会出现菜单，并且在 #menu 元素之外的任何单击都将隐藏菜单。

不幸的是，如果我没有在每次点击时调用outsideMenuHandler()，无论我是否点击了#menu 元素，我都无法使用主干的事件绑定来实现此功能。

我应该改变什么来完成这项工作？

这是我在backbone.js中所做的，它没有按预期工作：

myView = Backbone.View.extend({

    events: {
        'click #menu': 'insideMenuHandler',
        'click':       'outsideMenuHandler'
    }

    insideMenuHandler: function(e) {}, // Called when clicking #menu
    outsideMenuHandler: function(e) {} // Called on every click both on and off #menu

}

仅作为参考，以下是我单独使用 jQuery 的操作：

$(document).click(function(event) {
    if ( $(event.target).closest('#menu').get(0) == null ) {
        $("#menu").slideUp();
    }
});

【问题讨论】：

标签： jquery javascript-events backbone.js

【解决方案1】：

您需要解决一些问题。

首先，如果您的insideMenuHandler 返回false 或调用e.stopPropogation()，那么您的outsideMenuHandler 将不会因点击#menu 而被调用。例如：

http://jsfiddle.net/ambiguous/8GjdS/

但这不是你的全部问题。您的outsideMenuHandler 只会在点击您的视图时被调用；因此，如果有人点击您视图之外的页面，您的outsideMenuHandler 将不会被调用，您的菜单也不会关闭。如果您希望在有人单击#menu 之外的任何位置时菜单关闭，那么您必须手动绑定到body 并在视图被破坏时手动取消绑定。像这样的：

var myView = Backbone.View.extend({
    events: {
        'click #menu': 'insideMenuHandler'
    },

    initialize: function() {
        _.bindAll(this, 'insideMenuHandler', 'outsideMenuHandler');
    },

    render: function() {
        // Both <body> and <html> for paranoia.
        $('body, html').on('click', this.outsideMenuHandler);
        // ...
        return this;
    },

    remove: function() {
        // Clean up after ourselves.
        $('body, html').off('click', this.outsideMenuHandler);
        // ...
    },

    // ...
    outsideMenuHandler: function(e) {
        // ...
        return false;
    }
});

然后确保正确删除您的视图。例如：

http://jsfiddle.net/ambiguous/MgkWG/1/

【讨论】：

非常感谢您的回答。非常感激！一个简单的问题 - 据我了解，让点击事件返回 false 将阻止任何“默认事件”发生，这意味着所有其他点击都将被禁用，因为 outsideMenuHandler 返回 false。如果我在执行我的逻辑（隐藏我的菜单）后让我的outsideMenuHandler 返回true，我是否会给自己带来麻烦？
@Industrial：您最终会从body, html 绑定中两次调用outsideMenuHandler，但这可能不是问题。您可能只需将outsideMenuHandler 绑定到html 就可以逃脱惩罚，但您需要通过浏览器检查以确保它在您关心的所有浏览器中都能正常运行。

【解决方案2】：

问题是，您将事件绑定到定义为视图 el 的 DOM 元素。因此，如果这不是您的 jquery 示例中的window.document，您将不会注意到它们之外的任何点击。在您的示例中，最简单的方法是使用 jquery 手动添加事件，而不是使用主干。

【讨论】：