使用querySelector冒泡的事件

Question

我有一个附加到容器的事件侦听器，我想过滤被点击的内容。

在下面的示例中，我正在筛选出UL.head点击次数。

<div> 
<ul class="head"> 
    <li data-test="...">1</li> 
    <li>2</li> 
    <li>3</li> 
</ul> 
<ul class="head"> 
    <li>1</li> 
    <li>2</li> 
    <li data-test="...">3</li> 
</ul> 
<ul class="head"> 
    <li>1</li> 
    <li data-test="...">2</li> 
    <li>3</li> 
</ul> 
</div> 

document.querySelector('div').addEventListener('click', function(e) { 

    var ul = findParentByClass(e.target, ".head"); 
    if(ul) { // clicke a UL } 

}); 

function findParentByClass(node, cls) { 
    while (node && !hasClass(node, cls)) { 
     node = node.parentNode; 
    } 
    return node; 
} 

我想重现类似功能的findParentByClass，但它会findParentByQuerySelector。所以，我可以这样做：

li = findParentByQuerySelector('li:[data-test]'); 
if(li) { // clicked li with data-test attribute } 

我很为难，我怎么能实现querySelector到这个事件冒泡。

Answer 1

你可以简单的使用方法Element.matches：

function findParentBySelector(node, selector) { 
    while (node && !node.matches(selector)) { 
     node = node.parentNode; 
    } 
    return node; 
} 

然而，做注意此方法的，落实是不幸的是不一致的。

或者，您可以使用更常用的Element.querySelectorAll，它与指定元素的子级匹配。这是否意味着你需要考虑的祖父母以及父母：

function findParentBySelector(node, selector) { 
    while (node && node.parentNode) { 
     let list = node.parentNode.querySelectorAll(selector); 
     if (Array.prototype.includes.call(list, node)) { 
      return node 
     } 
     node = node.parentNode; 
    } 
    return node; 
} 

但我不完全漂亮调用该方法。