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

Answer 2

是否有针对此案例的通用解决方案，而无需检查目标的父级？

不，没有。可以通过以下示例说明原因：

<span id="target">
  <span class="a">
    <span class="b">
      <span class="c">Click me!</span>
    </span>
  </span>
</span>

如果您要将处理程序附加到“目标”，并将鼠标移到文本上，则不会看到手形光标，但您可以单击它并触发事件。它还会沿着树泡沫（或被捕获和分派，具体取决于你如何附加......），直到它到达“target”元素，在那里你的事件处理程序将被执行。这里的关键点是你的问题中<a>元素没有什么特别之处。您可能也希望寻找直接父级的span.b，或者沿着路径寻找span.a。你不能在没有遍历树的情况下找到它，这很简单，就像MinusFour的答案所示。

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

2 个答案: