如何将事件目标与选择器进行比较

Question

在我的函数中，我会接收一个节点类型 node，并将每个该类型的节点上添加一个 onclick 事件。

然后我想查看被点击的元素并进行“冒泡”，即在被选中的节点上方添加效果，这些被选中的节点可通过选择器 selector 进行选择，但问题是，我的函数接受的选择器可以是类、标签、ID 等等...

**那么，在下面部分，我应该将 target 与什么进行比较呢？**

function myFunc(node, event, selector){

    var elements = document.querySelectorAll(node);

    for (var i = 0; i < elements.length; i++){
         elements[i].onclick = function(event){
            var target = event.target;
             while (target != node){
                 **if (target == selector) **
                        applyEffects(target);
             }
             target = target.parentNode;
        };   
    }

}

另外，我不允许使用JQuery。 （这是作业的一部分，但我的问题与它没有直接关系）

- CodyBugstein

Answer 1

要检查一个元素（在您的情况下是目标）是否会被选择器匹配：

Array.prototype.indexOf.call(document.querySelectorAll(selector), element) !== -1

- sabof

---

这是一种过度的做法... 但它比matches更跨浏览器。 - Oriol

@Oriol 我不知道这个方法，所以我没有使用它。 - sabof

@Oriol 实际上只有 Chrome 支持它的无前缀形式。 - sabof