我的html元素具有以下事件处理程序
jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); });
单击时,我需要在#seek-bar上找到鼠标的位置。我以为上面的代码应该可以工作,但是结果不正确
您是否要relative简单地将鼠标指针定位到元素(或)的位置,
relative
1)event.pageX,event.pageY给你鼠标位置的相关文件!
event.pageX
event.pageY
2)offset():给出元素的偏移位置
offset()
3)position():它为您提供元素的相对位置,即
position()
考虑一个元素嵌入另一个元素内
例如 :
<div id="imParent"> <div id="imchild" /> </div>
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)); }); });