Javascript 使用jQuery如何获取目标元素上的点击坐标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3234977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery how to get click coordinates on the target element
提问by Roman
I have the following event handler for my html element
我的 html 元素有以下事件处理程序
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
我需要在点击时在#seek-bar 上找到鼠标的位置。我原以为上面的代码应该可以工作，但它给出了错误的结果
回答by
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/
您是否试图将鼠标指针的位置指向relative元素（或）只是鼠标指针位置
试试这个演示：http: //jsfiddle.net/AMsK9/
Edit :
编辑 ：
1) event.pageX, event.pageYgives you the mouse position relative document !
1) event.pageX、event.pageY给你鼠标位置相关文件！
Ref: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
参考：http: //api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2) offset(): It gives the offset position of an element
2) offset(): 它给出了一个元素的偏移位置
Ref: http://api.jquery.com/offset/
参考：http: //api.jquery.com/offset/
3) position(): It gives you the relative Position of an element i.e.,
3) position(): 它给你一个元素的相对位置，即，
consider an element is embedded inside another element
考虑一个元素嵌入另一个元素中
example:
例子：
<div id="imParent">
<div id="imchild" />
</div>
Ref: http://api.jquery.com/position/
参考：http: //api.jquery.com/position/
HTML
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
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));
});
});
回答by Nisar
$('#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);
});
回答by Krunal
回答by l2aelba
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+'%');
});
回答by Memet Olsen
If MouseEvent.offsetXis supportedby your browser (all major browsers actually support it), The jQuery Event objectwill contain this property.
如果MouseEvent.offsetX是支持通过浏览器（所有主流浏览器实际上支持它），jQuery的事件对象将包含此属性。
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.
MouseEvent.offsetX 只读属性提供该事件与目标节点的填充边缘之间鼠标指针的 X 坐标偏移。
$("#seek-bar").click(function(event) {
var x = event.offsetX
alert(x);
});
回答by AirBlack
see here enter link description here
见这里 在此处输入链接描述
html
html
<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>
css
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);
});
});
