我有一个针对HTML元素的事件处理程序:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
我需要在点击时找到鼠标在#seek-bar上的位置。我本以为上面的代码可以工作,但它给出了不正确的结果。
我有一个针对HTML元素的事件处理程序:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
我需要在点击时找到鼠标在#seek-bar上的位置。我本以为上面的代码可以工作,但它给出了不正确的结果。
1)event.pageX
,event.pageY
可以给出鼠标相对于文档的位置!
参考:http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2)offset()
:它可以给出元素的偏移位置。
参考:http://api.jquery.com/offset/
3)position()
:它可以给出元素的相对位置,即一个元素嵌套在另一个元素中的情况。
示例:
<div id="imParent">
<div id="imchild" />
</div>
参考: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));
});
});
'#B'
的情况:使用e.offsetX
和e.offsetY
。我猜你想要编辑它。我已经在这里更新了fiddle(http://jsfiddle.net/AMsK9/101/)。我是通过这篇文章找到这个解决方案的,所以谢谢。 - toto_tico$('#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);
});
})
在这里,您可以找到更多信息和演示。
MouseEvent.offsetX 只读属性提供了鼠标指针在事件和目标节点的填充边缘之间的 X 坐标偏移量。
$("#seek-bar").click(function(event) {
var x = event.offsetX
alert(x);
});
$('.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+'%');
});
在这里看 输入链接描述
HTML
<body>
<p>This is a paragraph.</p>
<div id="myPosition">
</div>
</body>
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);
});
});