事件绑定点击与backbone.js & jQuery

发布于 2024-12-29 18:15:30 字数 867 浏览 4 评论 0原文

我需要在 backbone.js 视图中绑定两个事件才能切换菜单。这个想法是，如果单击 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();
    }
});

原文

I need to bind two events in my backbone.js-view in order to toggle a menu. The idea is that if a button with the id #toggler is clicked the menu appears and any click outside the #menu element will hide the menu.

Unfortunately I cannot get this working with backbone's event binding without having the outsideMenuHandler() called on every click regardless if I clicked on the #menu element, or not.

What should I change to make this work?

This is what I have done in backbone.js, which doesn't work as intended:

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

}

Just as a reference, here's what I would do using jQuery alone:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

窝囊感情。 2025-01-05 18:15:30

有几件事您需要解决。

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

http://jsfiddle.net/ambigously/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/ambigously/MgkWG/1/

There are a couple things you need to sort out.

First of all, if your insideMenuHandler returns false or calls e.stopPropogation() then your outsideMenuHandler won't get called for clicks on #menu. For example:

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

But that's not your whole problem. Your outsideMenuHandler will only be called for clicks on your view; so, if someone clicks on the page outside your view, your outsideMenuHandler won't get called and your menu won't go down. If you want the menu to go down when someone clicks anywhere outside #menu, then you'll have to manually bind to body and manually unbind when your view is destroyed. Something like this:

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

and then be sure to properly remove your view. For example: