title: clientX and clientY not giving correct mouse pointer location
body: <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 noreferrer">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="https://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>