简单的javascript相当于带有选择器的$(document).on(event)

Question

我正在尝试将jQuery事件处理程序转换为纯javascript.页面上有特定选择器的负载,因此设计时只有一个具有该选择器的事件定位文档:

$(document).on("click", selectorString, function(event) {
 // do stuff
});

selector选择器列表在哪里作为字符串" .one, .two, .three".

我很难在没有jQuery的情况下复制这个:

document.addEventListener("click", function(event){
    if (elementHasClass(event.target, selectorString) {
        // do stuff
    }
});

但是,这并不具有所期望的行为,作为听者只有在document元素,而不是所选元素中的文档.有人能帮忙吗？

Answer 1

您的问题似乎是它不适用于嵌套元素。

例如，如果您单击span父级具有指定类的嵌套元素，则它不起作用，因为您只是检查该span元素（即event.target）是否具有该类。

要解决此问题，您实际上可以委托该事件并检查该event.target元素的父元素是否具有指定的类：

示例在这里

document.addEventListener("click", function (e) {
    var target = e.target;

    while (target && target.parentNode !== document) {
        target = target.parentNode;
        if (!target) { return; } // If element doesn't exist

        if (target.classList.contains('target')){
            // do stuff
            console.log(e.target);
        }
    }
});