JQuery 获取元素中的鼠标位置

我希望制作一个控件，用户可以点击 div 中的内容，然后拖动鼠标，然后放松鼠标，以指示他们想要的东西有多长。(这是用于日历控件的，因此用户将指示某个事件的时间长度)

看起来最好的方法是在父 div 上注册一个“ mousedown”事件，然后在 div 上注册一个“ mousemove”事件，直到“ mouseup”事件被触发。“ mousedown”和“ mouseup”事件将定义时间范围的开始和结束，当我按照“ mousemove”事件时，我可以动态地更改范围的大小，以便用户可以看到他们在做什么。我基于事件是如何在谷歌日历创建的。

我遇到的问题是，jQuery 事件似乎只提供了与整个页面相关的可靠的鼠标坐标信息。有没有什么办法可以辨别出参照父元素的坐标是什么？

编辑:

下面是我正在努力做的事情: alt text

258287 次浏览
小开

如果您将父元素设置为“ position: relant”，那么它将成为您正在跟踪鼠标事件的内容的“偏移量父元素”。因此 jQuery“ position ()”将与之相关。

小开
最佳答案

一种方法是使用 jQuery offset方法将事件中的 event.pageX和 event.pageY坐标转换为相对于父级的鼠标位置。这里有一个例子，以供将来参考:

$("#something").click(function(e){
var parentOffset = $(this).parent().offset();
//or $(this).offset(); if you really just want the current element's offset
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
});
小开

我使用这段代码，它非常好:)

    <script language="javascript" src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
$(".div_container").mousemove(function(e){
var parentOffset = $(this).parent().offset();
var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
var relativeYPosition = (e.pageY - parentOffset.top);
$("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
}).mouseout(function(){
$("#header2").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
});
});
</script>
小开

获取单击相对于当前单击元素的位置
使用此代码 < br/> 

$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
小开

此解决方案支持包括 IE 在内的所有主要浏览器。它还负责滚动。首先，它有效地检索元素相对于页面的位置，而不使用递归函数。然后它得到鼠标相对于页面的 x 和 y 值，并通过减法得到相对于元素的位置(例如，元素可以是图像或 div) :

function getXY(evt) {
var element = document.getElementById('elementId');  //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
var elementLeft = rect.left+scrollLeft;
var elementTop = rect.top+scrollTop;


if (document.all){ //detects using IE
x = event.clientX+scrollLeft-elementLeft; //event not evt because of IE
y = event.clientY+scrollTop-elementTop;
}
else{
x = evt.pageX-elementLeft;
y = evt.pageY-elementTop;
}
小开

@ AbdulRahim 的回答几乎是正确的，但我建议使用以下函数作为替代(以供进一步参考) :

function getXY(evt, element) {
var rect = element.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
var elementLeft = rect.left+scrollLeft;
var elementTop = rect.top+scrollTop;


x = evt.pageX-elementLeft;
y = evt.pageY-elementTop;


return {x:x, y:y};
}








$('#main-canvas').mousemove(function(e){
var m=getXY(e, this);
console.log(m.x, m.y);
});
小开

我的建议是:

e.pageX - this.getBoundingClientRect().left
小开

这里有一个也给你百分比位置的点，如果你需要它。 Https://jsfiddle.net/themezly/2etbhw01/

function ThzhotspotPosition(evt, el, hotspotsize, percent) {
var left = el.offset().left;
var top = el.offset().top;
var hotspot = hotspotsize ? hotspotsize : 0;
if (percent) {
x = (evt.pageX - left - (hotspot / 2)) / el.outerWidth() * 100 + '%';
y = (evt.pageY - top - (hotspot / 2)) / el.outerHeight() * 100 + '%';
} else {
x = (evt.pageX - left - (hotspot / 2));
y = (evt.pageY - top - (hotspot / 2));
}


return {
x: x,
y: y
};
}






$(function() {


$('.box').click(function(e) {


var hp = ThzhotspotPosition(e, $(this), 20, true); // true = percent | false or no attr = px


var hotspot = $('<div class="hotspot">').css({
left: hp.x,
top: hp.y,
});
$(this).append(hotspot);
$("span").text("X: " + hp.x + ", Y: " + hp.y);
});




});
.box {
width: 400px;
height: 400px;
background: #efefef;
margin: 20px;
padding: 20px;
position: relative;
top: 20px;
left: 20px;
}


.hotspot {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background: green;
border-radius: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<p>Hotspot position is at: <span></span></p>
</div>


提交答案