118

I have the following event handler for my html element

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

I need to find the position of the mouse on the #seek-bar at the time of clicking. I would have thought the above code should work, but it gives incorrect result

Roman
  • 10,309
  • 17
  • 66
  • 101
  • 4
    Position relative to the element, the viewport or the entire document? – James Jul 13 '10 at 07:30
  • I made it work using e.layerX - e.target.offsetLeft and for Oprea just used e.offsetX – Roman Jul 13 '10 at 08:12
  • if you wish to get it on a responsive site. try this article, you can get it on responsive sites as well. http://www.kvcodes.com/2014/03/get-exact-top-left-position-mouse-pointer-location-using-jquery/ – Kvvaradha Feb 16 '16 at 04:58
  • e.offsetX seems to work on Firefox and Chrome as well. According to [jQuery page](https://api.jquery.com/category/events/event-object/) it is copied but not *normalized*. – Ale Dec 15 '20 at 17:39

6 Answers6

249

Are you trying to get the position of mouse pointer relative to element ( or ) simply the mouse pointer location

Try this Demo : http://jsfiddle.net/AMsK9/

Edit :

1) event.pageX, event.pageY gives you the mouse position relative document !

Ref : http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset() : It gives the offset position of an element

Ref : http://api.jquery.com/offset/

3) position() : It gives you the relative Position of an element i.e.,

consider an element is embedded inside another element

example : 

<div id="imParent">
   <div id="imchild" />
</div>

Ref : http://api.jquery.com/position/

HTML

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

JavaScript

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX + ' , ' + e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});
  • 9
    +1 for the examples...one note though I'd also add the code here, if your link dies this question becomes useless in the future, I'd put the code for each and a brief description here :) – Nick Craver Jul 13 '10 at 11:25
  • 2
    There is a simpler way to do the case of `'#B'`: `e.offsetX` and `e.offsetY`. I guess you'd like to edit it. I already updated the fiddle [here](http://jsfiddle.net/AMsK9/101/). I found this solution thanks to the post, so thanks. – toto_tico Jan 18 '13 at 01:49
  • Thanks, because I personally confused with offset() and position(), for anyone need further clarification may read http://stackoverflow.com/questions/3202008/jquery-difference-between-position-and-offset for convenience sake – 西門 正 Code Guy May 09 '14 at 03:24
  • I had an element fixed to the bottom - that was 100% width, so I used window width as the posX instead - So I was able to determine if a user was cliking an "X" that was made with a :after css rule that was in the top right corner. – amurrell May 27 '14 at 17:38
  • Great example, but there is not obvious what is the difference between .position() and .offset(). You should wrap element #C in some parent div with some exemplary position to see that the click on #C returns your mouse position inside the element that is parent of #C, which is probably least frequently useful. – amik Nov 22 '14 at 17:22
  • For future readers: Here is a better demo of Avinash' Explanation: http://jsfiddle.net/AMsK9/558/ – Dennis98 Dec 27 '14 at 02:13
  • This gets messed up with element margin – William Entriken Jan 31 '18 at 04:39
19
$('#something').click(function (e){
    var elm = $(this);
    var xPos = e.pageX - elm.offset().left;
    var yPos = e.pageY - elm.offset().top;

    console.log(xPos, yPos);
});
Hendry
  • 882
  • 1
  • 11
  • 27
Nisar
  • 828
  • 1
  • 10
  • 28
3

Try this:

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

Here you can find more info with DEMO

Alice
  • 1,381
  • 3
  • 11
  • 18
Krunal
  • 3,443
  • 3
  • 23
  • 27
1

In percentage :

$('.your-class').click(function (e){
    var $this = $(this); // or use $(e.target) in some cases;
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    var posX = offset.left;
    var posY = offset.top;
    var x = e.pageX-posX;
        x = parseInt(x/width*100,10);
        x = x<0?0:x;
        x = x>100?100:x;
    var y = e.pageY-posY;
        y = parseInt(y/height*100,10);
        y = y<0?0:y;
        y = y>100?100:y;
    console.log(x+'% '+y+'%');
});
l2aelba
  • 21,591
  • 22
  • 102
  • 138
1

If MouseEvent.offsetX is supported by your browser (all major browsers actually support it), The jQuery Event object will contain this property.

The MouseEvent.offsetX read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

$("#seek-bar").click(function(event) {
  var x = event.offsetX
  alert(x);    
});
Memet Olsen
  • 4,578
  • 5
  • 40
  • 50
0

see here enter link description here

html

<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>

css

#myPosition{
  background-color:red;
  height:200px;
  width:200px;
}

jquery

$(document).ready(function(){
    $("#myPosition").click(function(e){
       var elm = $(this);
       var xPos = e.pageX - elm.offset().left;
       var yPos = e.pageY - elm.offset().top;
       alert("X position: " + xPos + ", Y position: " + yPos);
    });
});
AirBlack
  • 135
  • 1
  • 9