jQuery获取元素内的鼠标位置
我希望制作一个控件，用户可以在div内点击，然后拖动鼠标，然后放开鼠标，以指示他们想要的东西。 （这是用于日历控件的，所以用户将指示某个事件的时间长度）
看起来最好的方法是在父div上注册一个“mousedown”事件，然后在div上注册一个“mousemove”事件，直到触发“mouseup”事件。 “mousedown”和“mouseup”事件将定义时间范围的开始和结束，当我遵循“mousemove”事件时，我可以dynamic地改变范围的大小，以便用户可以看到他们在做什么。 我基于这个事件是如何在谷歌日历中创build的。
我遇到的问题是，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; });
我使用这段代码，它相当不错:)
<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>
该解决scheme支持所有主stream浏览器，包括IE。 它也照顾滚动。 首先，它高效地检索元素相对于页面的位置，而不使用recursion函数。 然后它获得相对于页面的鼠标点击的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的答案几乎是正确的。 但我build议下面的函数作为替代（进一步参考）：
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(mx, my); });
如果你让你的父元素为“position：relative”，那么它就是你正在跟踪鼠标事件的东西的“offset parent”。 因此，jQuery的“位置（）”将是相对的。
如果你需要的话，这也是给你百分之一点的位置。 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>
我会build议这样的：
e.pageX - this.getBoundingClientRect().left
