如何将 event.target 与选择器进行比较 [重复]答案

【问题标题】：How to compare event.target to a selector [duplicate]如何将 event.target 与选择器进行比较 [重复]
【发布时间】：2014-03-20 07:45:32
【问题描述】：

在我的函数中，我采用节点类型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。（这是家庭作业的一部分，但我的问题与它没有直接关系）

【问题讨论】：

标签： javascript dom delegation

【解决方案1】：

检查element（在您的情况下为target）是否与selector匹配：

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

【讨论】：

这是一种矫枉过正的方式......但它比matches更跨浏览器
@Oriol 不知道这个方法，所以我没有使用它。
@Oriol 实际上只有 Chrome 支持无前缀