javascript - 将点击事件附加到 div 内的某些链接

Question

我有导航 div，其中包含许多指向内部内容和外部页面的链接。我们正在创建一个普通的 JavaScript 来拦截任何点击，确定所需的内容并将其插入页面中，而不是每次都重新加载整个页面。

创建一个在父div上使用点击事件监听器的脚本工作很表面，如果您点击，则获取并插入，但也捕获了菜单中任何其他文本(标题等)的点击事件，但随后失败了:

 $('#navfly').addEventListener('click', function(e) {
   var newpg = e.target.getAttribute('href');
   // take href value, modify url for content location
   // fetch content with ajax GET
   // insert within content div
   e.preventDefault();
 });

导航 div 概念:

 <div id="navfly">
 <a href="content-one.htm">Content 1</a><br>
 <a href="content-two.htm">Content 2</a><br>
 <a href="content-three.htm">Content 3</a><br>
 <a href="content-four.htm">Content 4</a><br>
 <a href="https://some.otherdomain.com">External wepage</a><br>
 </div>

我正在寻找一种在特定 div 中定位 的方法。此外，我需要能够忽略某些链接的点击并允许它们充当普通链接。

与我在脚本中使用 $( ) 相反，我使用的是普通 javascript，而不是 Jquery。只需使用类似 Jquery 的 querySelector 函数即可。

Answer 1

使用Element.matches()仅处理您想要的 a 标签:

var navFly = document.querySelector('#navfly');

navFly.addEventListener('click', function(e) {
  // if it's not an a tag, that doesn't start with http do nothing
  if (!e.target.matches('a:not([href^="http"])')) {
    return;
  }
  e.preventDefault();

  var newpg = e.target.getAttribute('href');
  
  console.log(newpg);
  // take href value, modify url for content location
  // fetch content with ajax GET
  // insert within content div
});

<div id="navfly">
  <a href="content-one.htm">Content 1</a><br>
  <a href="content-two.htm">Content 2</a><br>
  <a href="content-three.htm">Content 3</a><br>
  <a href="content-four.htm">Content 4</a><br>
  <a href="https://some.otherdomain.com">External wepage</a><br>
</div>