clientX and clientY not giving correct mouse pointer location

Question

I wrote this simple code to print a small dot on the location where I clicked with the mouse pointer:-

$(document).ready(function(){
    $('#pane').click(function(e){
        var pixel = $('<div />')
                  .addClass('pixel')
                  .css({
                      top: e.clientY,
                      left: e.clientX
                  });

        $('#pane').append(pixel)
    });
});

See this fiddle I created. When I click anywhere inside the rectangle, a small dot is printed in that location. But the problem is that dot is not printed where the mouse pointer's tip was. See the below image to see what I meant:-

I tried in both Firefox and Chrome.

Answer 1

Your code is working correctly,

Zoom your page and check,

i have changed pixel height and width for better understanding from 2px to 3px. and drawing from e.clientX -1 and e.clientY -1 position so it looks exactly center.

You can find Fiddle