jQuery获取元素内的鼠标位置
jQuery获取元素内的鼠标位置
提问于 2010-11-23 03:58:05
我希望制作一个控件，用户可以在div中单击，然后拖动鼠标，然后松开鼠标，以便指示他们想要的东西有多长。(这是用于日历控件，因此用户将指示某个事件的时间长度)
看起来最好的方法是在父div上注册一个"mousedown“事件，然后在div上注册一个"mousemove”事件，直到"mouseup“事件被触发。"mousedown“和"mouseup”事件将定义时间范围的开始和结束，当我跟踪"mousemove“事件时，我可以动态更改范围的大小，以便用户可以看到他们正在做什么。我基于google日历中事件的创建方式。
我遇到的问题是，jQuery事件似乎只提供了引用整个页面的可靠鼠标坐标信息。有没有办法辨别引用父元素的坐标？
编辑：
下面是我正在尝试做的事情的图片：
回答 8
Stack Overflow用户
回答已采纳
发布于 2010-11-23 04:05:23
一种方法是使用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;
});Stack Overflow用户
发布于 2012-11-08 02:17:49
获取相对于当前单击元素的单击位置的步骤
使用此代码
$("#specialElement").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
}); Stack Overflow用户
发布于 2012-08-20 17:55:38
我使用了这段代码，它非常好用:)
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4249648
复制相关文章
相似问题