How to add a marker and show a div relative to a mouse click in vanilla Javascript

Question

I'm trying to add a marker and a div next to the mouse click in vanilla Javascript.

Basically if the user clicks anywhere on the page, I want to add a marker where the click was made (a circular small div) and show a div next to the marker.

If the user presses somewhere else, the previous marker and div disappears and they basically appear in the new location of the click

What I did:
I created the div and I set the display to none, and now I'll try to make it appear when the user clicks anywhere on the page
for the marker, I have this Jquery code that I will convert to vanilla JS:

  $(function(){
    $('body').click(function(e){
      var x = e.clientX;
      var y = e.clientY;
    
      var circle=$('<div class="circle"></div>');
          circle.css('top',e.pageY - 15);
          circle.css('left',e.pageX - 15)
          $('body').append(circle);
    })
  })

my goal is to have something like this (picture below)

My idea is to have a transparent overlay on top of all so that you can track the position of click relative to the overlay element. There is a question here regarding doing this with jQuery https://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element — Ozgur Sar, Dec 01 '20 at 15:18
If you use event listener you can get `clientX` and `clientY` and just add them to style. — Danilo Ivanovic, Dec 01 '20 at 15:25

Matthew Dangle · Accepted Answer · 2020-12-01T20:36:54.360

Enable onClick
Set body element to the full size of the page so the onClick is received. Add a width: 100%; and height: 100%; to the body. If this handled by appending content to the body, this step can be skipped.

Moveable Blue Circle
In order to move the cursor on the screen you need to create a singular DOM element, then move it during the onclick event. This is achieved by creating a circle outside of the onclick and updating the CSS properties inside the onclick.

Add White Box
As for the white box container, you can use the same code as for the circle; just offset the top and left css styling.

Example

$(function(){
  
    // Create a new circle once.
    var circle=$('<div class="circle"></div>');
    var container=$('<div class="container"></div>');
    
    // Retrieve the body and add on click parameter.
    var body = $('body');
    body.append(circle);
    body.append(container);
    body.click(function(e){
    
          // Move circle here.
          circle.css('top', e.pageY - 15);
          circle.css('left', e.pageX - 15)
          if (circle.css('display') == 'none')
            circle.css('display', 'block');
          
          // Move container here.
          container.css('top', e.pageY + 20);
          container.css('left', e.pageX - 15);
          if (container.css('display') == 'none') {
            container.css('display', 'block');
            container.click(function(e) {
              e.stopPropagation(); // Prevents moving circle when clicking on the container.
            })
          }
    })
  })

html, body {
  width: 100%;
  height: 100%;
  background-color: grey;
}

.circle {
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 20px;
}
.container {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid black;
  height: 200px;
  width: 300px;
  border-radius: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Great answer, but there will be a form inside the white div. How can I disable the onClick event inside the white div ? (sorry I should've added this detail in the question) Because now I cannot click on the white div — AziCode, Dec 01 '20 at 17:01
`event.stopPropagation();` is a possibility. [Here is a example on stackoverflow](https://stackoverflow.com/a/1369080/14578434) — Matthew Dangle, Dec 01 '20 at 17:45
What is the purpose of (let x = e.clientX; let y = e.clientY) ? I don't see the variables x and y being used anywhere ? — AziCode, Dec 01 '20 at 18:42
I removed the unused variables from my snippet. I must have accidentally left them there after playing with your provided example. — Matthew Dangle, Dec 01 '20 at 20:24
For VanillaJS, read: https://www.w3schools.com/js/js_htmldom_nodes.asp — Matthew Dangle, Dec 01 '20 at 20:29
Great thanks, I actually managed to convert your answer into vanilla js, and it's working great. My only problem now is the event propagating to the white div. I want to be able to click on the inside of a div, like buttons and inputs — AziCode, Dec 01 '20 at 20:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/225377/discussion-between-matthew-r-dangle-and-azicode). — Matthew Dangle, Dec 01 '20 at 20:37

How to add a marker and show a div relative to a mouse click in vanilla Javascript

1 Answers1