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

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

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

你不能使用停止传播或类似的东西，因为这也会阻止菜单上的第二次点击。

Answer 2

虽然延迟第二次事件绑定可能会在99.999％的时间内起作用，但我不禁感到唠叨'如果'一次有什么东西滞后而且它不起作用。

This question提供了更令人满意的（至少对我而言）解决方案

两个onClick（）事件同时发生？

2 个答案: