addEventListener每当我点击页面上的超链接时都会发送6次日志,为什么?

huangapple go评论61阅读模式
英文:

Why does addEventListener is sending logs 6 times whenever I click a hyperlink in a page?

问题

我的 addEventListener 在我点击页面上的超链接时发送了 6 次日志。我一直在查找原因,但是无法弄清楚为什么。我知道这个论坛里有类似的问题,但我不知道为什么它会向我的 Webhook URL 发送 6 次日志。非常感谢所有的帮助。在此提前表示感谢。

英文:

my addEventListener is sending logs 6 times whenever I click a hyperlink in a page. I have been checking what causing it and I couldn't figure out why. I know there are similar questions like this in this forum but I don't know why it's sending 6 logs to my webhook url. Appreciate all the help I can get. Thank you very much in advance.

答案1

得分: 1

Because you are adding 6 event listeners to the onClick of the link.

I can think of two ways to solve this depending on what you are trying to do. Because I'm not sure, I'll just give you both, but I'd advise you clarify your question.

PS: I have also renamed one of your variables to reduce confusion because you had one variable that was being named twice.

Stop the same eventListener being added more than once

如果您只定义事件监听函数一次,它就不会被多次添加,只会被添加一次。

let link = document.createElement("a");
let imageNameTextNode = document.createTextNode(images[i].name);
let eventListenerFunction = (e) => {
    log('A link was clicked');
  }
document.querySelectorAll('[class^="awsui_tabs-content"]').forEach(linkText => {
  link.addEventListener("click", eventListenerFunction );
});

Add the event listener to the link text:

然后,您将在每个linkText上有一个事件监听器。我不知道什么是linkText,所以我不知道这是否是您想要的。

let link = document.createElement("a");
let imageNameTextNode = document.createTextNode(images[i].name);
let eventListenerFunction = 
document.querySelectorAll('[class^="awsui_tabs-content"]').forEach(linkText => {
  linkText.addEventListener("click", (e) => {
    log('A link was clicked');
  } );
});
英文:

Because you are adding 6 event listeners to the onClick of the link.

I can think of two ways to solve this depending on what you are trying to do. Because I'm not sure, I'll just give you both, but I'd advise you clarify your question.

PS: I have also renamed one of your variables to reduce confusion because you had one variable that was being named twice.

Stop the same eventListener being added more than once

if you define the eventListener function once, it won't be added multiple times. it will just be added once.

let link = document.createElement("a");
let imageNameTextNode = document.createTextNode(images[i].name);
let eventListenerFunction = (e) => {
    log('A link was clicked');
  }
document.querySelectorAll('[class^="awsui_tabs-content"]').forEach(linkText => {
  link.addEventListener("click", eventListenerFunction );
});

Add the event listener to the link text:

Then you will have one event listener on each linkText. I don't know what a linkText is, so I don't know if this is what you want

let link = document.createElement("a");
let imageNameTextNode = document.createTextNode(images[i].name);
let eventListenerFunction = 
document.querySelectorAll('[class^="awsui_tabs-content"]').forEach(linkText => {
  linkText.addEventListener("click", (e) => {
    log('A link was clicked');
  } );
});

答案2

得分: 0

You're adding the listener multiple times to the same element.

Assuming the elements you click have the class "awsui_tabs-content":

<div class="awsui_tabs-content">...</div>

Try something like this:

document.querySelectorAll('[class^="awsui_tabs-content"]').forEach(linkElement => {
  linkElement.addEventListener("click", (clickEvent) => {
    log('A link was clicked: ' + linkElement.className);
  });
});
英文:

You're adding the listener multiple times to the same element.

Assuming the elements you click have the class "awsui_tabs-content":

&lt;div class=&quot;awsui_tabs-content&quot;&gt;...&lt;/div&gt;

Try something like this:

document.querySelectorAll(&#39;[class^=&quot;awsui_tabs-content&quot;]&#39;).forEach(linkElement =&gt; {
  linkElement.addEventListener(&quot;click&quot;, (clickEvent) =&gt; {
    log(&#39;A link was clicked: &#39; + linkElement.className);
  });
});

huangapple
  • 本文由 发表于 2023年5月26日 00:27:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/76334440.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定