Question

我试图将jQuery事件处理程序转换为纯javascript。页面上有一些特定的选择器，因此设计时只有一个具有该选择器的事件定位文档：

selector

其中.one, .two, .three是一个选择器列表，作为字符串＆＃34; document.addEventListener("click", function(event){ if (elementHasClass(event.target, selectorString) { // do stuff } });＆＃34;。

我在没有jQuery的情况下努力复制这个：

document

但是这并没有所需的行为，因为侦听器只在{{1}}元素上，而不是在文档中的选定元素。任何人都可以帮忙吗？

Answer 1

看起来您的问题是它不能处理嵌套元素。

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

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

Example Here

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

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

1 个答案: