javascript - 两个 onClick() 事件同时发生？

Question

我对代码的期望是这样的: 单击按钮时，指针位置会出现选项菜单。任何后续单击，无论是菜单项还是浏览器中的其他位置，都应关闭菜单。单击菜单项将关闭菜单，但不要单击其他任何位置。当我取消注释 $(document.body).one('click', function() {menu.remove()} 时，菜单从一开始就不会出现，我怀疑我以某种方式拥有它这样安排后，单击调出菜单实际上也会关闭菜单。代码如下:

render : function() {
            this.$el.html(this.template(this.model.toJSON()));
            var that = this;
            if (this.model.attributes.memberType != 'OWNER') {

                this.$('.memberTypeSelector').button({
                    icons : {
                        secondary : "ui-icon-triangle-1-s"
                    }
                }).click(function(event) {
                    that.showPermissions(that.model, event, that);
                });
            ...
},

showPermissions : function(member, event, view) {
            var levels = ['ADMIN', 'CONTRIBUTOR', 'VIEWER'];
            var menu = $('<ul>');
            $.each(levels, function() {
                if(member.attributes.memberType !== this) {
                    var item = $('<li>').appendTo(menu);
                    $('<a>').attr('href', '#').text(this).appendTo(item).click(function() {
                        menu.remove();
                        view.changePermission(member, this.text, view);
                    });
                }
            });
            menu.menu().css({
                position : 'absolute',
                left : event.clientX,
                top : event.clientY
            });
            $(document.body).append(menu);
            /*$(document.body).one('click', function() {
                menu.remove();
            });*/
        }

预先感谢您的帮助。

Answer 1

如果延迟绑定(bind)到文档 10 毫秒，这应该有足够的时间让事件传播到正文，这样它就不会立即关闭菜单，然后下次单击菜单将导致正文单击处理程序触发。

setTimeout(function(){
    $(document.body).one('click', function() {menu.remove();});
},10)

您不能使用停止传播或类似的操作，因为这也会停止菜单上的第二次点击。