javascript - 使用 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 ，它与指定元素的子元素匹配。这确实意味着您需要考虑祖 parent 和 parent :

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;
}

但我并不认为该方法很漂亮。