如何確定某個事件是否由創建該事件的同一事件觸發？

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);

}); 

演示

使用setTimeout延遲為0將使它在完成此事件后立即執行代碼。 還要注意，我使用的是one而不是one on因為您只需要一次使用此事件處理程序，而沒有它，您最終將附加無數個事件處理程序，當mouseup在頁面上的任何位置觸發時，每個事件處理程序都需要處理。

一個不太愚蠢的解決方案可能看起來像這樣：

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

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

演示

Answer 3

您為什么不這樣隔離事件：

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

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

Answer 4

我最終使用event.timeStamp屬性檢查兩個事件是否不同。 還向文檔事件添加了取消綁定和名稱空間，以防止事件堆疊。

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

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

});