jQuery jQuery获取元素内的鼠标位置

jQuery get mouse position within an element

提问by Chris Dutrow

I was hoping to craft a control where a user could click inside a div, then drag the mouse, then let up on the mouse in order to indicate how long they want something to be. (This is for a calendar control, so the user will be indicating the length, in time, of a certain event)

我希望制作一个控件，让用户可以在 div 内单击，然后拖动鼠标，然后松开鼠标以指示他们想要某事物的长度。（这是针对日历控件，因此用户将指示某个事件的时间长度）

It looks like the best way to do this would be to register a "mousedown" event on the parent div that in turn registers a "mousemove" event on the div until a "mouseup" event is triggered. The "mousedown" and "mouseup" events will define the start and end of the time range and as I follow "mousemove" events, I can dynamically change the size of the range so that the user can see what they are doing. I based this off of how events are created in google calendar.

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

The issue I'm having is that the jQuery event seems to only provide reliable mouse coordinate information in reference to the whole page. Is there any way to discern what the coordinates are in reference to the parent element?

我遇到的问题是 jQuery 事件似乎只提供关于整个页面的可靠鼠标坐标信息。有什么方法可以辨别参考父元素的坐标是什么？

Edit:

编辑：

Heres a picture of what I'm trying to do:

这是我正在尝试做的事情的图片：

回答by jball

One way is to use the jQuery offsetmethod to translate the event.pageXand event.pageYcoordinates from the event into a mouse position relative to the parent. Here's an example for future reference:

一种方法是使用 jQueryoffset方法将事件中的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;
});

回答by Sajjad Ashraf

To get the position of click relative to current clicked element
Use this code

获取相对于当前点击元素的点击位置
使用此代码

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

回答by Maarten Hartman

I use this piece of code, its quite nice :)

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

    <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>

回答by Paulo Bueno

@AbdulRahim answer is almost correct. But I suggest the function below as substitute (for futher reference):

@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);
            });

回答by Abdul Rahim Haddad

This solution supports all major browsers including IE. It also takes care of scrolling. First, it retrieves the position of the element relative to the page efficiently, and without using a recursive function. Then it gets the x and y of the mouse click relative to the page and does the subtraction to get the answer which is the position relative to the element (the element can be an image or div for example):

该解决方案支持包括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;
    }

回答by Pointy

If you make your parent element be "position: relative", then it will be the "offset parent" for the stuff you're tracking mouse events over. Thus the jQuery "position()" will be relative to that.

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

回答by Benn

Here is one that also gives you percent position of the point in case you need it. https://jsfiddle.net/Themezly/2etbhw01/

这是一个还可以为您提供点的百分比位置，以防您需要它。 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>

回答by Eduard

I would suggest this:

我建议这样做：

e.pageX - this.getBoundingClientRect().left