使用jQuery如何获取目标元素上的点击坐标 [英] Using jQuery how to get click coordinates on the target element
问题描述
我的html元素有以下事件处理程序
jQuery（＃seek-bar）。 （e）{
var x = e.pageX - e.target.offsetLeft;
alert（x）;
}）;
我需要在点击时在＃seek-bar上找到鼠标的位置。我会认为上面的代码应该工作，但它给出不正确的结果
相对到元素（或）只是鼠标指针位置
尝试此演示： http://jsfiddle.net/AMsK9/
编辑：
1） event.pageX ， event.pageY 为您提供鼠标位置相对文档！
Ref ： http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2） offset（）：它给出了元素的偏移位置
参考： http://api.jquery.com/offset/ p>
3） position（）：它给出了元素的相对位置，例如
考虑元素嵌入在另一个元素内
示例：
< div id =imParent>
< div id =imchild/>
< / div>
参考： http://api.jquery.com/position/
HTML
< body&
< div id =Astyle =left：100px;>默认< br />鼠标< br /> position< / div>
< div id =Bstyle =left：300px;> offset（）< br />鼠标< br /> position< / div>
< div id =Cstyle =left：500px;> position（）< br />鼠标< br /> position< / div>
< / body>
$ b$（document）.ready（function（e）{
$（'＃A' e）{//默认鼠标位置
alert（e.pageX +'，'+ e.pageY）;
}）;
$（'＃B'）。点击（function（e）{// Offset mouse Position
var posX = $（this）.offset（）。left，
posY = $（this）.offset（）。top;
alert（（e.pageX - posX）+'，'+（e.pageY - posY））;
}）;
$（'＃C'）。 （e）{//相对于它的父对象的鼠标位置
var posX = $（this）.position（）。left，
posY = $（this）.position（）。top;
alert（（e.pageX - posX）+'，'+（e.pageY - posY））;
}）;
}）;
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
解决方案Are you trying to get the position of mouse pointer
relativeto element ( or ) simply the mouse pointer location
Try this Demo : http://jsfiddle.net/AMsK9/
Edit :
1)
event.pageX,event.pageYgives 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 elementRef : 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)); }); });
这篇关于使用jQuery如何获取目标元素上的点击坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
