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的 parent ？

注意:我需要这个 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;
    }
});