title: Selecting individual elements on mouse click HTML
body: <p>I am trying to implement selecting individual elements on the click of the mouse in a html page. When clicking, I want to be able to find which element I am clicking on. The end goal is to be able to place a marker on a webpage and then have that marker stay within proximity of that clicked element/marker, using coordinates to keep that marker in place as the screen resolution changes.</p>
  
  <p>for eg:- if there is</p>
  
  <pre><code>&lt;div id="div1"&gt;
      &lt;Button id="button1"&gt;&lt;/Button&gt;
      &lt;Textarea id="textarea1"&gt;&lt;/Textarea id=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>on the click of mouse I just want one of the elements to be selected like either <code>&lt;div&gt;</code> or <code>&lt;button&gt;</code> or <code>&lt;textarea&gt;</code> (furthermore detecting a class/id) without using the <code>onclick</code> method. I tried finding solution everywhere, but nothing worked out.</p>
  
  <p>Please find attached link to the jsfiddle with some html/css, feel free to use to help explain anything :- <a href="https://jsfiddle.net/code_Learner/qzzrmod3/11/" rel="nofollow noreferrer">https://jsfiddle.net/code_Learner/qzzrmod3/11/</a></p>
  
  <p>Let me know if there is any confusion of what I am trying to do and I can try and explain it more. Any advice/direction on how to start with this would be greatly appreciated!</p>