如何在文本“示例”之后的 javascript 中触发 <a> 标记事件答案

【问题标题】：How to fire the <a> tag event in javascript that comes after the text "Example"如何在文本“示例”之后的 javascript 中触发 <a> 标记事件
【发布时间】：2019-04-05 10:06:23
【问题描述】：

当点击某个文本后的锚标记时，我需要触发一个 javascript 事件。我的页面包含很多锚标记，只有在单击文本“示例”下方的锚标记而不使用任何类名或 ID 时，我才需要触发事件。有可能吗？

【问题讨论】：

什...什么？不幸的是，您的问题毫无意义。你需要触发什么事件，一个 JavaScript 事件？默认的锚点点击事件？向我们展示您迄今为止所做的尝试有助于改善问题的背景。

标签： javascript html css google-analytics google-tag-manager

【解决方案1】：

如果您可以在示例文章中添加任何 id 或 class，则可以在 JavaScript 中添加事件监听器：

<article>ABC</article>
<a></a>
<article class='exampleArticle'>Example</article>
<a></a>
<a></a>
<article>ABC</article>

<script>

 var ele = document.querySelector('.exampleArticle')
 // For first tag
 ele.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
 }
// For second tag
ele.nextElementSibling.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
 }



</script>

【讨论】：

【解决方案2】：

如果我正确理解您的意思，您可以通过为每个锚标记使用 id 来设置事件侦听器，例如

<article>ABC</article>
<a></a>
<article>Example</article>
<a id="fire-event1" href="#">Anchor1</a>
<a id="fire-event2" href="#">Anchor2</a>
<article>ABC</article>

<script>
  var fireEvent1 = document.getElementById("fire-event1");
  var fireEvent2 = document.getElementById("fire-event2");

  fireEvent1.addEventListener("click", myFunction1);
  fireEvent2.addEventListener("click", myFunction2);

  function myFunction1() {
    alert("Event 1 activated");
  }
  function myFunction2() {
    alert("Event 2 activated");
  }
</script>

或者，如果您希望多个锚点使用相同的功能触发，请将目标锚点分配给一个类，然后循环遍历它们以在每个锚点上设置侦听器，例如

<article>ABC</article>
<a></a>
<article>Example</article>
<a class="fire-event" href="#">Anchor1</a>
<a class="fire-event" href="#">Anchor2</a>
<article>ABC</article>

<script>
  var fireEvent = document.getElementsByClassName("fire-event");

  for (var i = 0; i < fireEvent.length; i++) {
    fireEvent[i].addEventListener('click', myFunction);
  }

  function myFunction() {
    alert("Event fired");
  }
</script>

JSFiddle

【讨论】：

【解决方案3】：

Vaibhav Kumar 的答案适用于给定的示例，但请注意它存在语法错误，因为他没有关闭 addEventListener 语句上的括号。它们应该是：

ele.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
});

如果您想将侦听器添加到大量 HTML 标记，它也会变得非常混乱 - 很快它就会看起来像......

ele.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.addEventListener('click', function(ele) {
  //Do any thing here
});

要设置一个侦听器以在多个 HTML 标签上触发相同的功能，只需将一个类分配给您要定位的标签；要触发单独的函数，请使用 id 或 classes。使用示例代码查看我的完整答案。

【讨论】：