DOM 元素事件未触发答案

【问题标题】：DOM Elements Events Not FiringDOM 元素事件未触发
【发布时间】：2023-04-06 22:05:01
【问题描述】：

我的项目中有以下代码。我正在获取.pagination 下的所有锚元素并对其进行迭代并为每个元素添加一个事件。

我添加了alert 以证明元素实际上已加载到页面中并且它们的类型正确（HTMLAnchorElement），但是当我单击它们时，没有任何反应。我什至将事件更改为其他各种类型，例如mousedown、select 等。

$(function() {
    [...document.querySelectorAll('.pagination a')].forEach(e => {
        alert(Object.prototype.toString.call(e)); // [object HTMLAnchorElement]
        e.addEventListener('click', function(ev) {
            alert('Click!');
            if (!this.classList.contains('collapsed')) {
                // Prevents last collapsable from being closed
                ev.stopPropagation();
            }
        });
    });
});

有人能告诉我为什么我的事件没有触发吗？

【问题讨论】：

正如 blanknamefornow 在他们的回答中所说，代码按原样工作。您必须检查链接上没有覆盖透明元素，或者在 CSS 中为链接设置 pointer-events: none。为了更方便的调试，使用 DevTools 来调试（例如console.log）而不是警报。另外，收集的a 元素是否具有href 属性？如果是这种情况，您可能希望阻止默认操作而不是阻止传播？
@Teemu 没有覆盖透明元素。 Bootstrap 的链接上还有其他事件可以毫无问题地触发，并且 CSS 悬停效果也可以使用。我在另一个项目中出于相同目的使用了这个精确的 sn-p，它可以正常工作。
不管它是什么，它不能被提供的代码复制，就像说的那样，它可以按原样工作。你必须建立一个minimal reproducible example。

标签： javascript html events dom-events

【解决方案1】：

可能是错误的选择器，

$(function() {
    if (document.querySelector('.pagination a')) {
        console.log("Well a single search came up fine");
    }
    [...document.querySelectorAll('.pagination a')].forEach(e => {
        console.log(e);

        alert(Object.prototype.toString.call(e)); // [object HTMLAnchorElement]
        e.addEventListener('click', function(ev) {
            alert('Click!');
            if (!this.classList.contains('collapsed')) {
                // Prevents last collapsable from being closed
                ev.stopPropagation();
            }
        });
    });
});

也许可以确定；我的代码运行良好？

我测试了这个

    [...document.querySelectorAll('a')].forEach(e => {
        console.log(e);
        e.addEventListener('click', function(ev) {
            alert('Click!');
            if (!this.classList.contains('collapsed')) {
                // Prevents last collapsable from being closed
                ev.stopPropagation();
            }
        });
    });

在控制台中，它将每个链接都变成了您想要的。所以可能是一个糟糕的参考或出乎意料的事情！ :X

【讨论】：

另一种猜测，[object HTMLAnchorElement] 对于输出看起来很奇怪。
该输出是预期的，因为选择器收集了a 元素。
我不得不说到目前为止这是一个选择器问题，仅与“a”完美配合。 :)
在控制台中，您始终可以转到元素，然后右键单击其中任何一个复制 > 复制选择器。对于快速 querySelector 术语。
没有使用错误的选择器。正如我在问题中所述，初始警报触发良好。我有两个与选择器匹配的锚点，我收到了两个 [object HTMLAnchorElement] 警报就好了。不会触发的是 e.addEventListener。