javascript - Get position relative to parent not viewport on mousedown / touchstart -

javascript - Get position relative to parent not viewport on mousedown / touchstart -

how, on mousedown or touchstart, can position of mouse relative or within container or element took place in.

so, know can pagex/y or clientx/y event or on touch, original event. positioning compared whole viewport. div absolute positioned, how can positioned within boundaries of container ( absolute positioned ).

so works: http://jsfiddle.net/fb6an/

here code:

$('.datacard').on('mousedown touchstart', function(event){ $(this).children('.ripple').show().css({'left':event.clientx || event.originalevent.clientx, 'top':event.clienty || event.originalevent.clienty}); });

except doesn't work in elements on total site working on. on elements closer right border of screen, appears more right , lower the actual mouse location. in elements left, works fine.

so wondering how can position within element , style .ripple there?

no need jquery when finding coordinates set style:

$('.datacard').on('mousedown touchstart', function(event){ var clickx = (event.clientx || event.originalevent.clientx), clicky = (event.clienty || event.originalevent.clienty); $(this).children('.ripple').each(function(){ $(this) .show() .css({ left: clickx - this.offsetparent.offsetleft, top: clicky - this.offsetparent.offsettop }); }); });

updated fiddle @gaby aka g. petrioli: http://jsfiddle.net/s52u4/1/

in particular case, using jquery hitting thumbtack sledge hammer.

javascript jquery mousedown touchstart