jQuery get mouse position within an element

Question

I was hoping to craft a control where a user could click inside a div  then drag the mouse  then let up on the mouse in order to indicate how long they want something to be    This is for a calendar control  so the user will be indicating the length  in time  of a certain event   It looks like the best way to do this would be to register a  mousedown  event on the parent div that in turn registers a  mousemove  event on the div until a  mouseup  event is triggered   The  mousedown  and  mouseup  events will define the start and end of the time range and as I follow  mousemove  events  I can dynamically change the size of the range so that the user can see what they are doing   I based this off of how events are created in google calendar   The issue I m having is that the jQuery event seems to only provide reliable mouse coordinate information in reference to the whole page   Is there any way to discern what the coordinates are in reference to the parent element   Edit   Heres a picture of what I m trying to do

User · Answer

I would suggest this   e pageX - this getBoundingClientRect   left

User · Answer

I use this piece of code  its quite nice           lt script language  javascript  src  http   code jquery com jquery-1 4 1 js  type  text javascript  gt  lt  script gt   lt script language  javascript  gt    document  ready function            div container   mousemove function e           var parentOffset     this  parent   offset            var relativeXPosition    e pageX - parentOffset left     offset - gt  method allows you to retrieve the current position of an element  relative  to the document         var relativeYPosition    e pageY - parentOffset top               header2   html   lt p gt  lt strong gt X-Position   lt  strong gt   relativeXPosition      lt strong gt Y-Position   lt  strong gt   relativeYPosition   lt  p gt           mouseout function                header2   html   lt p gt  lt strong gt X-Position   lt  strong gt   relativeXPosition      lt strong gt Y-Position   lt  strong gt   relativeYPosition   lt  p gt                 lt  script gt

User · Answer

One way is to use the jQuery offset method to translate the event pageX and event pageY coordinates from the event into a mouse position relative to the parent  Here s an example for future reference       something   click function e      var parentOffset     this  parent   offset          or   this  offset    if you really just want the current element s offset    var relX   e pageX - parentOffset left     var relY   e pageY - parentOffset top

User · Answer

If you make your parent element be  position  relative   then it will be the  offset parent  for the stuff you re tracking mouse events over   Thus the jQuery  position    will be relative to that

User · Answer

This solution supports all major browsers including IE  It also takes care of scrolling  First  it retrieves the position of the element relative to the page efficiently  and without using a recursive function  Then it gets the x and y of the mouse click relative to the page and does the subtraction to get the answer which is the position relative to the element  the element can be an image or div for example    function getXY evt        var element   document getElementById  elementId       replace elementId with your element s Id      var rect   element getBoundingClientRect        var scrollTop   document documentElement scrollTop                      document documentElement scrollTop document body scrollTop      var scrollLeft   document documentElement scrollLeft                                         document documentElement scrollLeft document body scrollLeft      var elementLeft   rect left scrollLeft        var elementTop   rect top scrollTop           if  document all     detects using IE                x   event clientX scrollLeft-elementLeft    event not evt because of IE             y   event clientY scrollTop-elementTop                    else              x   evt pageX-elementLeft              y   evt pageY-elementTop

User · Answer

To get the position of click relative to current clicked element Use this code      specialElement   click function e       var x   e pageX - this offsetLeft      var y   e pageY - this offsetTop

User · Answer

AbdulRahim answer is almost correct  But I suggest the function below as substitute  for futher reference    function getXY evt  element                    var rect   element getBoundingClientRect                    var scrollTop   document documentElement scrollTop                                  document documentElement scrollTop document body scrollTop                  var scrollLeft   document documentElement scrollLeft                                                     document documentElement scrollLeft document body scrollLeft                  var elementLeft   rect left scrollLeft                    var elementTop   rect top scrollTop                   x   evt pageX-elementLeft                  y   evt pageY-elementTop                   return  x x  y y                                     main-canvas   mousemove function e                   var m getXY e  this                   console log m x  m y

User · Answer

Here is one that also gives you percent position of the point in case you need it  https   jsfiddle net Themezly 2etbhw01     x000D   x000D  function ThzhotspotPosition evt  el  hotspotsize  percent    x000D    var left   el offset   left  x000D    var top   el offset   top  x000D    var hotspot   hotspotsize   hotspotsize   0  x000D    if  percent    x000D      x    evt pageX - left -  hotspot   2     el outerWidth     100        x000D      y    evt pageY - top -  hotspot   2     el outerHeight     100        x000D      else   x000D      x    evt pageX - left -  hotspot   2    x000D      y    evt pageY - top -  hotspot   2    x000D      x000D   x000D    return   x000D      x  x  x000D      y  y x000D       x000D    x000D   x000D   x000D   x000D    function     x000D   x000D        box   click function e    x000D   x000D      var hp   ThzhotspotPosition e    this   20  true      true   percent   false or no attr   px x000D   x000D      var hotspot       lt div class  hotspot  gt    css   x000D        left  hp x  x000D        top  hp y  x000D          x000D        this  append hotspot   x000D         span   text  X      hp x      Y      hp y   x000D        x000D   x000D   x000D      x000D   box   x000D    width  400px  x000D    height  400px  x000D    background   efefef  x000D    margin  20px  x000D    padding  20px  x000D    position  relative  x000D    top  20px  x000D    left  20px  x000D    x000D   x000D   hotspot   x000D    position  absolute  x000D    left  0  x000D    top  0  x000D    height  20px  x000D    width  20px  x000D    background  green  x000D    border-radius  20px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  box  gt  x000D     lt p gt Hotspot position is at   lt span gt  lt  span gt  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[jquery] jQuery get mouse position within an element

Examples related to jquery

Examples related to mouseevent