JavaScript - 将eventListener附加到没有jQuery的子元素

Question

我试图在没有jQuery的情况下实现以下功能:

$(document).on('click', 'a.no-target', function(e) {
    e.preventDefault();
});

我尝试过以下代码:

document.addEventListener('click', function(e) {
    if (e.target.tagName == 'A' && e.target.className.indexOf('no-target') > -1) {
        e.preventDefault();
    }
});

我的问题是,如果我有嵌套的元素,如下所示:

<a href="#" class="more no-target">
    <span class="more">Nested element</span>
</a>

事件target是<span>代替<a>.

这种情况是否有通用的解决方案而无需检查target父母的情况？

注意:我需要这个eventListener来处理动态创建的元素,所以我不能将它直接附加到a.no-target元素上.

谢谢.

Answer 1

这是向上遍历,直到找到侦听器的元素.

document.addEventListener('click', function(e) {
    var elem = e.target;
    while (elem != document) {
       if (elem.tagName == 'A' && elem.className.match(/\bno\-target\b/) !== null) {
        e.preventDefault();
       }
       elem = elem.parentNode;
    }
});