Question

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

创建一个在父div上使用click事件监听器的脚本，如果你点击了＆lt; a＆gt;就可以获取和插入，还可以在菜单中的任何其他文本（标题等）上捕获点击事件失败：

 $('#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();
 });

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

我正在寻找一种定位＆lt; a＆gt;的方法在一个特定的div内。此外，我需要能够忽略某些链接上的点击，并允许它们作为普通链接运行。

与我在脚本中使用$（）相反，我使用的是vanilla javascript，而不是Jquery。只需使用类似querySelector函数的Jquery。

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>

将click事件附加到div中的某些链接

1 个答案: