clientX and clientY not giving correct mouse pointer location
<p>I wrote this simple code to print a small dot on the location where I clicked with the mouse pointer:-</p>

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

        $('#pane').append(pixel)
    });
});
</code></pre>

<p>See this <a href="http://jsfiddle.net/DsPLG/1/" rel="nofollow">fiddle</a> 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 <code>tip</code> was. See the below image to see what I meant:-</p>

<p><img src="http://i.stack.imgur.com/P9vAY.png" alt="screenshot showing dot printed in a different location"></p>

<p>I tried in both Firefox and Chrome.</p>
