How to add circle on click event in JavaScript?

Question

Could you tell me how to add circle on click event in JavaScript? Actually, I want to achieve that if user click anywhere in div element, it add circle at that position. Currently, it added anywhere not added in correct position. It should be added where user clicks.

This is my code.

$(function(){
  $('#fx').click(function(e){
    var circle=$('<div class="circle"></div>');
    circle.css('top',e.pageX);
    circle.css('left',e.pageX);
    $('#fx').append(circle);
  });
});

Sushanth -- · Accepted Answer · 2017-03-28T23:20:08.017

2

If you want the circle to start exactly at the point where you clicked, the top is supposed to be e.pageY.

Then you will have to negate (r) to point it to the origin. As the radius for the circle is 15px, it translates to

circle.css('top',e.pageY - 15);
circle.css('left',e.pageX - 15)

plunker

edited Mar 28 '17 at 23:20

answered Mar 28 '17 at 23:17

Sushanth --

55,259
9
66
105

thanks but I refector my code culd you pls tell me why it is not wrking https://plnkr.co/edit/P8fD45krVoQRhVCsJoAy?p=preview – user944513 Mar 28 '17 at 23:18
actually I changed `jQuery` to `#` sign – user944513 Mar 28 '17 at 23:19
May be you did not fork a new one. It is still pointing to the old changes. Check this link https://plnkr.co/edit/lhwfOGPG71R1tFwPqkyI?p=preview – Sushanth -- Mar 28 '17 at 23:20
That is because `#` is not a valid identifier. For more info you can check this out http://stackoverflow.com/questions/1661197/what-characters-are-valid-for-javascript-variable-names – Sushanth -- Mar 28 '17 at 23:29
A correction is needed to place the circle center exactly at the mouse arrow tip. – Louys Patrice Bessette Mar 29 '17 at 00:31

score 1 · Answer 2 · answered Mar 28 '17 at 23:10

1

You have to change the following line of code:

circle.css('top', e.pageY);

answered Mar 28 '17 at 23:10

DZDomi

1,685
15
13

y it is not working https://plnkr.co/edit/P8fD45krVoQRhVCsJoAy?p=preview – user944513 Mar 28 '17 at 23:17

Louys Patrice Bessette · Answer 3 · 2017-03-29T00:29:09.560

If you want the circle to be positionned EXACTLY were the user clicks...

You have to know that pageX and pageY doesn't give you the position of the "tip" of the mouse arrow... But the center of the mouse icon displayed.

So, ""usual icons" dimentions are 20px x 20px.

I have updated your Plunker.
I have added a "dot" to show the exact position where a user expects it to be the center, which is the tip of the arrow.

I made the circle much bigger to be sure about the middle.

See by yourself on this forked and updated Plunker.

Code is:

$(function(){
  $('#fx').click(function(e){

    var width = 300;        // Width of the element has to be hard coded here;
    var radius = width/2;
    console.log(radius);    // Since element is a circle, the radius is enought to set position.

    var mouseTip = 10;      // But mouse arrow tip has to be taken in account.

    var circle=$('<div class="circle"></div>');
      circle.css('top',e.pageY-radius-mouseTip);
      circle.css('left',e.pageX-radius-mouseTip);
      $('#fx').append(circle);

    var dot=$('<div class="dot"></div>');       // This is only intended to show where user REALLY wants to clic
                                                // and the FACT that there is a correction to apply.
      dot.css('top',e.pageY-mouseTip);
      dot.css('left',e.pageX-mouseTip);
      $('#fx').append(dot);
  });
});

So this is great for the "arrow" default cursor, it will need another mouse correction value if you use the "pointer" icon.

How to add circle on click event in JavaScript?

3 Answers3