使用 jQuery 立即为文档调用单击处理程序

Question

menuClick: function () {
            var _this = this;
            var clickNamespace = 'click.menu-item' + this.get('currentComponentIndex');
            Ember.$(document).on(clickNamespace, function (event) {
                if (!Ember.$(_this.getSourceFromEvent(event)).closest(_this.$('.menu-item')).length)    {
                    Ember.$(document).off(clickNamespace);
                    _this.set('isSubmenuVisible', false);       
                }
            });
            this.set('isSubmenuVisible', true);
        },

每当单击菜单按钮时，都会注册单击处理程序，当单击发生在正文中的其他任何位置时，单击处理程序将被取消注册。当我做 Ember.$（'body'）.on 时，它工作得很好，但是当我做 Ember.$（document）.on 时，处理程序会立即与处理程序注册一起调用。单击后不会调用处理程序，而是在注册发生时立即调用！原因是什么？

Answer 1

我相信你已经使用 $（'body'）.on（"click"、".menu-item"， menuClick） 或类似的东西附加了菜单点击。

现在，当调用menuClick时，您绑定了$（document）.on（...在您的问题中，该事件最终会冒泡到您的文档，触发单击并调用您刚刚附加的处理程序。

如果绑定到 $（'body'）.on（...），处理程序将被附加，但由于事件已经冒泡到正文，因此当事件冒泡时不会再次触发它。

您可以在菜单中添加一个 event.stopPropagation（） 单击以阻止事件冒泡。