多个元素上的Javascript单击事件侦听器并获取目标ID

IT技术 javascript html onclick
2021-03-06 12:53:40

我有一个 javascript 文件，它在每个带有<article>标签的元素上设置了一个“点击”的 EventListener 。我想在事件触发时获得点击的文章的 ID。出于某种原因，我的代码什么也没产生！

我的javascript：

articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect(e),false);
function redirect(e){
alert(e.target.id);
}

为什么这不起作用？顺便说一句，我的文章设置在加载窗口时调用的函数中，我知道这肯定有效，因为该函数还有其他可用的东西。

编辑

所以我修复了我的代码，这样它就会循环并将监听器添加到每个文章元素，现在我得到一个没有任何内容的警报框。当尝试输出没有 ID 的 e.target 时，我收到每个元素的以下消息：

[object HTMLHeadingElement]

有什么建议？

另一个编辑

我当前的 javascript 代码：

function doFirst(){
articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect(articles[i]),false);
}
}

function redirect(e){
alert(e.id);
}
window.addEventListener('load',doFirst,false);

这是在页面加载完成时显示我的警报框，而没有考虑到我没有点击该死的东西：O

6个回答

您没有将文章对象作为参数传递给重定向。

试试这个（编辑）：

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(ev){
    alert(ev.target.id);
}

希望，它会解决这个错误。

这是显示 ID，但在我什至单击该项目之前！我该如何解决这个问题？
2021-04-25 12:53:40
这正是正在发生的事情。加载页面的那一刻，我会弹出带有元素 ID 的警报框。
2021-05-10 12:53:40
@arielschon12：我没听明白你想说什么？你是说它显示警报，即使没有点击元素。这是不可能的。
2021-05-14 12:53:40
是否仅在页面加载期间发生。
2021-05-19 12:53:40
@arielschon12：看看我的编辑。希望它能解决问题。
2021-05-19 12:53:40

为什么没有人提到检查单击元素的单个事件？

document.body.addEventListener('click', function(e) {
    var target = e.target;
    if (target.nodeName === 'article') {
        // do whatever you like ;-)
    }
    e.stopPropagation()
});

事件越少性能越好..

如果您不需要检查整个身体上的点击事件，您可以将事件附加到一些更近的​​父元素

在以前提供的解决方案上，是否有关于此解决方案性能的任何参考
2021-05-12 12:53:40

您正在执行重定向函数而不是传递引用，试试这个：

articles = document.getElementsByTagName('article');
articles.addEventListener('click',redirect,false);
function redirect(e){
    alert(e.target.id);
}

编辑： 此外，getElementsByTagName 返回一个包含文章的数组，因此您必须遍历它们并在每个文章上调用 addEventListener。

articles = document.getElementsByTagName('article');
for (var i = 0; i < articles.length; i++) {
    articles[i].addEventListener('click',redirect,false);
}
function redirect(e){
    alert(e.target.id);
}
你有什么其他的建议？
2021-04-22 12:53:40
仍然无法正常工作，我收到一个警告框，但没有 ID。它只是空的。
2021-05-02 12:53:40
是的，我错过了您使用 getElementsByTagName 的事实。查看我的编辑
2021-05-09 12:53:40

getElementsByTagName返回一个节点列表。然后，您可以使用 for 循环向这些元素中的每一个添加一个事件侦听器。

<div id="test">
hey
</div>
<div id="test2">
yo
</div>

<script>
var nl = document.getElementsByTagName('div');

for(var i=0; i<nl.length; i++){
    nl[i].addEventListener('click', function(e){
        alert(e.target.id);
    },false);
}
</script>
你有什么其他的建议？
2021-04-25 12:53:40
你的 html 是什么样子的。
2021-05-08 12:53:40
这很有帮助，现在我可以看到一个警告框。问题是，警报框是空的。当我知道我的元素有 ID 时，它没有 ID。这是为什么？
2021-05-18 12:53:40
我只是散落着一堆文章，那不是重要的部分。
2021-05-18 12:53:40

这个迷你 javascript 库 (1.3 KB) 可以做所有这些事情

https://github.com/Norair1997/norjs/ 

nor.event(["#first"], ["touchstart", "click"], [doSomething, doSomething]);

这个插件可以处理这样的事情等等

其它你可能感兴趣的问题
上一篇如何从 URL 数组向文档添加图像列表？ 下一篇Jquery 忽略编码 ISO-8859-1