JavaScript 查找元素之间

Question

我正在寻找最绝妙的点子。重点是效率 - 让我们尽量避免一堆循环 =)

没有图书馆。这是纯 JS 天才的练习。不过，如果它们实现了这一点，请随意从库中引用函数。无需回退到蹩脚的旧浏览器(即:IE)。

设置

我正在尝试创建事件委托(delegate)。我将一个事件监听器绑定(bind)到容器元素(上下文)，用于发生在该元素内的每种事件类型(单击、鼠标输入等)。监听器引用一个函数，我们称之为“路由”。

有一个单独创建的对象，看起来像这样(示例):

myarr['click']['.myclass'] = functionReference1;
myarr['click']['#myid'] = functionReference2;
myarr['click']['div>a'] = functionReference3;

route 采用event.type(此处为“click”)并转到 myarr 并获取所有 click 记录。 route 然后遍历每个 selector key 并将其与 event.target 匹配。如果匹配，则调用函数引用，如果需要，则调用 callback。

这一切都很好。相当快，直接。

问题

event.target 可能是与选择器键 匹配的元素的子元素。我正在寻找疯狂平滑的巫术黑魔法来确定该父级是否在我们的上下文元素和 event.target 之间。最好有一些 native 浏览器功能。

理想情况下，例如，我可以按照以下方式做一些事情

context.querySelectorAll(key + ""+ event.target);

但显然，据我所知，我无法将对象传递给 querySelectorAll。

尝试了什么

两种方法都试过了。两者都有效。两者都不漂亮。

1)

遍历 event.target.parentNode 直到找到匹配项。这个手提袋做到了，但它在我现有的循环中创建了一个循环。当页面上有多个选择器键和大量元素时开始变慢。

if (event['target'].matchesSelector(key)) {
    //do callback
} else {
    var et = event['target'];
    while (et['parentNode'] !== null and et['parentNode'] !== this) {
        et = et['parentNode'];
        if (et.matchesSelector(key)) {
            //do callback
            break;
        }
    }
}

2)

使用范围。我为这个而感到自豪，但它也有同样的多循环问题。没有过多地测试性能，但是这里发生了很多事情，如果有很多元素与选择器键匹配，这可能会影响效率。

if (event['target'].matchesSelector(key)){
    //do callback
} else {
    var range2 = document.createRange();
    range2.selectNode(event.target);
    var range = document.createRange();         
    var allthese = document.querySelectorAll(key)
    for (var i = 0; i < allthese.length; i++){
        range.selectNode(allthese[i]);
        if (range2.compareBoundaryPoints(range2.START_TO_START, range) && range2.compareBoundaryPoints(range2.END_TO_END, range) <= 0){
            //do callback
            break;
        }
    }
}

MAGIC VOODOO - 给我找一些，当我再次获得代表时，我会设立一个大赏金。

Answer 1

也许你应该试试这个:

event['target'].matchesSelector(key) || event['target'].matchesSelector(key + ' *')

这里我的第二个条件将检查目标是否是键选择器的后代

正如您在此 JSFIDDLE 中看到的那样(fiddle 仅适用于 webkit(更喜欢 chrome)浏览器)子/后代使用父选择器匹配

PS:如果您还需要与实际键匹配的元素，此方法将不起作用，但在您的问题中，正如您所说的“疯狂平滑的巫毒黑魔法来确定该父元素是否在我们的上下文元素和 event.target 之间” , 所以我想你不需要实际的元素