使用jQuery如何获取目标元素上的点击坐标
我有我的html元素的以下事件处理程序
jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); 我需要在点击时在＃seek-bar上find鼠标的位置。 我会认为上面的代码应该可以工作，但是会产生不正确的结果
你是否试图获得relative对于元素（或）的鼠标指针的位置只是鼠标指针的位置
试试这个演示： http : //jsfiddle.net/AMsK9/
编辑：
1） event.pageX ， event.pageY给你鼠标位置的相关文件！
Ref ： http : //api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2） offset() ：给出一个元素的偏移位置
Ref ： http : //api.jquery.com/offset/
3） position() ：它给你一个元素的相对位置，
考虑一个元素embedded在另一个元素内
例如 ：
<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)); }); });
$('#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); });
尝试这个：
jQuery(document).ready(function(){ $("#special").click(function(e){ $('#status2').html(e.pageX +', '+ e.pageY); }); })
在这里你可以find更多与DEMO 信息
百分比：
$('.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+'%'); });
如果您的浏览器支持 MouseEvent.offsetX （所有主stream浏览器都支持它），则jQuery Event对象将包含此属性。
MouseEvent.offsetX只读属性在该事件与目标节点的填充边之间的鼠标指针的X坐标中提供偏移量。
$("#seek-bar").click(function(event) { var x = event.offsetX alert(x); });
