javascript - 在外部单击时隐藏多个元素的最有效方法？

Question

好的，我们都知道这种在点击外部元素(即元素失去焦点)时隐藏元素(和多个元素)的方法:

$('document').on('click', function () { $(element).hide(); });

$(element).on('click', function (e) { e.stopPropagation(); /* ka-chow! */ });

意味着任何到达文档的点击事件都会隐藏元素，而元素内的任何点击都不会传播到文档，也不会触发点击事件。

这一切都很好，绝对不是新闻。

但是，我有一个复杂而丰富的用户界面。这个界面有很多元素需要这种行为。让我们假设只有一个元素需要隐藏在每个事件中。我是否需要每次都遍历整个批处理才能找到我想要隐藏的一个元素？

如果是这样，最有效的方法是什么？给他们一个唯一的类名？或者将每个元素的类名/ID/DOM 实例存储在一个数组中并每次循环遍历它？在我看来，每种解决方案都比其他解决方案效率低下。

你会怎么做？

Answer 1

假设:

1. 这些元素由 javascript 显示/隐藏。

2. 规律是越晚出现，越早隐藏。

然后我会维护一个数组来处理它，例如:

var displayedElements = [];

...

// called when you want to display an element
function showUp (ele) {
    // push element into array
    displayedElements.push(ele);
    ...
}

// called when you want to close the last displayed element
function closeOneIfAvailable () {
    var len = displayedElements.length;
    if (len > 0) {
        var idx = len - 1;
        hideIt (displayedElements[idx]);
        displayedElements.splice(idx, 1);
    }
}

// called when you want to hide an element
function hideIt (ele) {
    ...
}