在外面单击时隐藏多个元素的最有效方法

Most efficient way to hide multiple elements on click outside?

本文关键字：有效 方法 元素 单击 隐藏 在外面      更新时间：2023-09-26

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

$('document').on('click', function () { $(element).hide(); });
$(element).on('click', function (e) { e.stopPropagation(); /* ka-chow! */ });
这意味着到达文档的任何单击事件

都将隐藏该元素，而元素内的任何单击都不会传播到文档，也不会触发单击事件。

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

但是，我有一个复杂而丰富的 UI。此接口具有许多需要此类行为的元素。假设每个事件只需要隐藏一个元素。我是否需要每次遍历整个地段，才能找到我想隐藏的一个元素？

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

你会怎么做？

假设：

  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) {
    ...
}
相关文章：