title: document.preventDefault() is not what I need
body: <p>I made a website running on an Apache server. The website is only accessed by me. It consists of a drop down list with two options and a "Generate" button. When the button is click, it shows a list of audio elements containing songs. Above each audio element is also a link to the mp3 file itself. I wanted to make a <a href="https://en.wikipedia.org/wiki/Lightbox_(JavaScript)" rel="nofollow">Lightbox</a>
  fade in and show the audio element separately when someone clicked on it. I used JQuery to prevent default behaviour when the a tag was clicked, but cannot find a way of only targeting it. This is my problem:</p>
  
  <pre><code>document.addEventListener("click", function(event){
  event.preventDefault();});
  </code></pre>
  
  <p>I have tried changing the <code>document</code> part, but it is showing this error: 'Uncaught TypeError: songPlayer.addEventListener is not a function'. Currently, it is targeting all of the document DOM elements, which is not what I want. Is there any other way of achieving this? Also, does anyone have any tips on making lightboxes? Thanks.</p>