jQuery Get Relative Mouse Position

Get the relative position of the mouse relative to the element in jQuery

The following jQuery code snippet is used to get the relative position of the mouse pointer. This function takes the element ID and the current x and y coordinates of the mouse pointer as parameters. It then returns the relative distance between the current position of the mouse cursor and the specified element.

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;
  return {'x': x, 'y': y};
}

Example usage

jQuery(document).ready(function($) {

    // 获取鼠标指针当前的x和y坐标
    var X = $('body').offset().left;
    var Y = $('body').offset().top;
    mouseX = ev.pageX - X;
    mouseY = ev.pageY - Y;

    // 获取页面上相对于#eid元素的相对位置
    alert(rPosition('eid',mouseX,mouseY)); //注意此处将x,y更正为mouseX,mouseY

});

FAQs about jQuery relative to mouse position (FAQs)

How to use jQuery to get mouse position without using mouse events?

In jQuery, mouse events are usually used to get the mouse position. However, if you want to get the mouse position without using the mouse event, you can use the .offset() method. This method returns the offset coordinates of the first element in the matching element set relative to the document. Here is a simple example:

var position = $("#element").offset(); // 返回包含top和left属性的对象
console.log("元素位于：" + position.left + "," + position.top);

How to use jQuery to get the mouse position inside an element?

To get the mouse position inside an element, you can use the .offset() method with the pageX and pageY properties of the event object. Here is an example:

$("#element").mousemove(function(event) {
  var parentOffset = $(this).offset();
  var relX = event.pageX - parentOffset.left;
  var relY = event.pageY - parentOffset.top;
  console.log("X坐标：" + relX + " Y坐标：" + relY);
});

What is the use of the mousemove() method in jQuery?

The

method in mousemove()jQuery is used to attach an event handler function to the mousemove event, or to trigger the event on an element. This event is sent to the element when the mouse pointer moves inside the element. It can be used to track the movement of the mouse and perform operations according to the position of the mouse.

How to use jQuery to get the position of the mouse pointer?

You can use jQuery to get the position of the mouse pointer using the event.pageX and event.pageY properties. These properties provide mouse pointer positions relative to the left and upper edges of the document, respectively.

How to use jQuery to find the mouse position relative to the element?

To find the mouse position relative to the element, you can subtract the element's position from the position of the mouse pointer. Here is an example:

$("#element").mousemove(function(event) {
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;
  console.log("X坐标：" + x + " Y坐标：" + y);
});

This will give you the mouse pointer position relative to the specified element.

made subtle adjustments to the code example to make it clearer and easier to understand. Fixed the issue where the x and y variables were undefined in the example usage, and used mouseX and mouseY instead. In addition, the text is polished to make it smoother and more natural.

The above is the detailed content of jQuery Get Relative Mouse Position. For more information, please follow other related articles on the PHP Chinese website!