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

Question

I have navigation divs with a number of links to both internal content and external pages. We are creating a vanilla javascript to intercept any clicks, determine the content required and insert it in the page, rather than reloading the entirety of the page everytime.

Creating a script that uses a click event listener on the parent div worked superficially, fetching and inserting if you clicked on <a>, but also captured click events on any other text in the menu (titles and such) which subsequently failed:

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

The nav div concept:

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

I am looking for a way to target <a> within a specific div. In addition I need to be able to ignore clicks on some links and allow them to function as normals links.

And contrary to my use of $( ) in the script, I am using vanilla javascript, NOT Jquery. Just using a Jquery like querySelector function.

Answer 1

Use Element.matches() to handle just the a tags you want:

 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>