事件绑定点击backbone.js＆jQuery

我需要绑定我的backbone.js -view中的两个事件来切换菜单。这个想法是，如果点击一个ID为#toggler的按钮，菜单将会出现，任何在#menu元素之外的点击都会隐藏菜单。事件绑定点击backbone.js＆jQuery

不幸的是，无论我点击#menu元素还是不点击，我都无法使用骨干的事件绑定工作，而无需每次点击都调用outsideMenuHandler()。

我应该改变什么才能使这项工作？

这是我在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(); 
    } 
});

来源

2012-01-30 Industrial

有几件事情你需要理清。

首先，如果你的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/

来源

2012-01-30 20:36:55

非常感谢您的回答。非常感激！一个简单的问题 - 据我所知，让一个点击事件返回false将防止任何“默认事件”发生，这意味着所有其他点击将被禁用，因为'outsideMenuHandler'返回'false'。如果在执行我的逻辑（隐藏我的菜单）后让我的'outsideMenuHandler'返回'true'，我是否会陷入麻烦？ – Industrial 2012-01-31 10:59:38

@Industrial：您最终会从'body，html'绑定中调用'outsideMenuHandler'，但这可能不成问题。你可能只能绑定'outsideMenuHandler'到'html'，但你想浏览器检查一下，确保它在你关心的所有浏览器中正确运行。 – 2012-01-31 19:01:25

-1

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

来源

2012-01-30 20:33:56

事件绑定点击backbone.js＆jQuery

回答

相关问题