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

【问题标题】：Most efficient way to hide multiple elements on click outside?在外部单击时隐藏多个元素的最有效方法？
【发布时间】：2013-01-28 09:55:24
【问题描述】：

好的，所以我们都知道在单击外部元素（即元素失去焦点）时隐藏元素（和多个元素）的这种方式：

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

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

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

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

但是，我有一个复杂而丰富的 UI。这个接口有许多需要这种行为的元素。让我们假设在每个事件中只需要隐藏一个元素。我是否需要每次都遍历整个区域才能找到我想要隐藏的一个元素？

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

你会怎么做？

【问题讨论】：

给他们所有相同的类，然后它是一个单行，就像你的例子一样。
@RoryMcCrossan 这绝对是最有效的方法吗？
归根结底，这取决于您是搜索要隐藏的元素，还是浏览器搜索。我希望浏览器可以比您的 Javascript 更快地找到它显示的页面元素。无论如何，浏览器在 CSS 类中存储所有元素的列表并不会超出可能性范围，因此它可能根本不需要搜索。但是，您将始终需要进行搜索，或者维护自己的列表并进行迭代，这对您来说是更多的工作——您实际上不必做的工作。
所以一个简单的类名是要走的路。有人想将其添加为答案并获得代表吗？
因此可能一次显示多个元素，但您想通过某种规则关闭其中一个，我的问题是，规则是什么？

标签： javascript jquery css performance

【解决方案1】：

假设：

这些元素由 javascript 显示/隐藏。
规则是越晚显示越早隐藏。

那我就维护一个数组来处理它，例如：

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) {
    ...
}

【讨论】：

就是这么简单明了。主要道具！