我希望创建一个控件，用户可以在其中点击div，然后拖动鼠标，最后松开鼠标以指示他们想要的长度。 （这是为了日历控件，因此用户将指定某个事件的时间长度）
看起来最好的方法是在父div上注册“mousedown”事件，然后在div上注册“mousemove”事件，直到触发“mouseup”事件。 “mousedown”和“mouseup”事件将定义时间范围的开始和结束，随着我跟随“mousemove”事件，我可以动态更改范围的大小，以便用户可以看到自己的操作。 我基于如何在google日历中创建事件进行了操作。
我的问题在于，jQuery事件似乎只提供相对于整个页面的可靠鼠标坐标信息。 有没有办法确定相对于父元素的坐标？
编辑：
这是我想做的事情的图片：
一种方法是使用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;
});
$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
});
var y = e.pageY - $(this).offset().top; 但是你的回答让我找到了正确的方向。 - Solomon Closson我使用这段代码，它非常不错 :)
<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>
@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);
});
这个解决方案支持所有主流浏览器，包括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;
}
这里有一个可以给出点的百分比位置的方法，如果需要的话。 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>"position:relative"。然后，jQuery位置将相对于父元素而不是页面报告其位置。我的答案措辞不好，它暗示它与Pointy的解决方案直接相关，但这是一种在您不能或不想依赖父元素的样式属性来计算偏移量时计算偏移量的方法。 - jballe.pageX - this.getBoundingClientRect().left
offset()也是相对的，所以如果父元素是其他元素的子元素，则会得到错误的结果。请改用position()。 - Flash Thunder