Question

假设我有以下事件：

$(button).on('mouseup', function (event1) {
    $(something).show();

    $(document).on('mouseup', function (event2) {
        $(something).hide();
    });

});

因此，它会在单击按钮时显示“某些内容”，并在单击文档时隐藏它。如何确保第二个evnet不会在创建它的同一事件中触发？现在，某些东西会立即显示和隐藏（至少在Firefox上）。

我需要在没有任何类型的全局变量的情况下这样做，最好是。

Answer 1

这个怎么样：

$(button).on('mouseup', function (event1) {
    $(something).show();
    event1.stopPropagation();
    $(document).one('mouseup', function (event2) {
        $(something).hide();
    });

});

stopPropagation()将阻止事件通过按钮（到文档）。

one()只运行一次事件然后消失...再次点击按钮可以重新创建。

JSFiddle

Answer 2

这是另一个不依赖时间戳的解决方案：

$("button").on('mouseup', function (event1) {
    $("#something").show();

    setTimeout(function () {
        $(document).one('mouseup', function (event2) {
             $("#something").hide();
        });
    }, 0);

});

demo

使用延迟为0的setTimeout将使代码在完成此事件后立即执行。另请注意，我使用的是one而不是on，因为您只需要一次此事件处理程序，如果没有它，您最终会附加无限数量的事件处理程序，每个事件处理程序都需要处理mouseup会在您网页的任意位置触发。

不那么愚蠢的解决方案可能如下所示：

$("button").on('mouseup', function (event1) {
     $("#something").show();
});

$(document).on('mouseup', function (event2) {
    if(event2.target != $("button")[0]) {
        $("#something").hide();
    }
});

demo

Answer 3

为什么不像这样隔离事件：

$(button).on('mouseup', function (event1) {
    $(something).show();
});

$(document).on('mouseup', function (event2) {
        $(something).hide();
});

Answer 4

我最终使用event.timeStamp属性来检查这两个事件是否是不同的。还为文档事件添加了unbind和命名空间，以防止事件堆叠。

$(button).on('mouseup', function (event1) {
    $(something).show();

    $(document).on('mouseup.'+someIdentifier, function (event2) {
        if(event1.timeStamp != event2.timeStamp) {
            $(something).hide();
            $(document).unbind('mouseup.'+someIdentifier);
        }
    });

});

如何通过创建事件的同一事件来判断事件是否被触发？

4 个答案: