How can I mark in the Circle use React or vanilla.js

Question

I want to use mark in the circle,onClick mark the dot,out put the json obj
Is there any npm package to use

onClick

Answer 1

Just get click position relative to parent tag, and then move the child tag using style left/top.

 // get reference let outer = document.getElementById("container"); let inner = document.getElementById("circle"); // add click listener to parent tag outer.addEventListener("click", function(event) { let result = { Azimut: { x: event.offsetX, y: event.offsetY, }, Size: 10, } // inner.style.top = (result.Azimut.y - result.Size / 2) + "px"; // inner.style.left = (result.Azimut.x - result.Size / 2) + "px"; inner.style.width = result.Size + "px"; inner.style.height = result.Size + "px"; })

 <div id="container" style=" width: 100px; height: 100px; border: 1px solid black; position: relative;"> <div id="circle" style=" border: 1px solid black; position: absolute; "></div> <div>