我的html元素有以下事件处理程序
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
我需要找到单击时鼠标在#搜索栏上的位置.我本以为上面的代码应该可以工作,但是它给出了不正确的结果
我的html元素有以下事件处理程序
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
我需要找到单击时鼠标在#搜索栏上的位置.我本以为上面的代码应该可以工作,但是它给出了不正确的结果
Are you trying to get the position of mouse pointer relative
to element ( or ) simply the mouse pointer location
Try this Demo : 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()
:它给你一个元素的相对位置,即,
假设一个元素嵌入到另一个元素中
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));
});
});