如何解雇 tag event in javascript that comes after the text “Example”

Question

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

Answer 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>

Answer 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

Answer 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。请参阅示例代码的完整答案。