11

<article>我有一个 javascript 文件，它在带有标签的每个元素上设置一个“click”的 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

4

7 回答 7

12

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

试试这个（编辑）：

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

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

于 2012-12-15T16:35:43.670 回答
11

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

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

事件越少越好。

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

于 2016-03-06T07:52:56.853 回答
4

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

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);
}
于 2012-12-15T14:41:59.633 回答
2

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>
于 2012-12-15T14:51:39.297 回答
0

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

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

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

这个插件可以处理这些东西等等

于 2018-05-27T19:32:40.300 回答
0

抱歉碰到这个旧帖子，但我会做这样的事情

const myElements = document.querySelectorAll("article")
myElements.forEach(x => x.setAttribute("onclick", "alertFunction(this.id)"))

function alertFunction(theId){
alert(theId)
}

如果 JavaScript 是你所需要的，那就是这样。但是今天您可以改用 JQuery，这样代码会更少。

于 2021-12-15T00:42:28.447 回答
-1 
articles.addEventListener('click',redirect,false); // omit redirect(e) inside event listener // and then try with the alert as you did.

如果不起作用，则尝试通过 e.id 而不是 e.target.id 在警报中，如下所示：

   alert(this.id);

谢谢。

于 2012-12-15T14:59:05.310 回答