jquery obtient une position de souris relative

Obtenez la position relative de la souris par rapport à l'élément de jQuery

L'intégralité de l'extrait de code jQuery suivant est utilisé pour obtenir la position relative du pointeur de la souris. Cette fonction prend l'ID d'élément et les coordonnées x et y actuelles du pointeur de souris sous forme de paramètres. Il renvoie ensuite la distance relative entre la position actuelle du curseur de la souris et l'élément spécifié.

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

Exemple d'utilisation

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

});

FAQ sur jQuery par rapport à la position de la souris (FAQ)

Comment utiliser jQuery pour obtenir la position de la souris sans utiliser d'événements de souris?

Dans jQuery, les événements de souris sont généralement utilisés pour obtenir la position de la souris. Cependant, si vous souhaitez obtenir la position de la souris sans utiliser l'événement de la souris, vous pouvez utiliser la méthode .offset(). Cette méthode renvoie les coordonnées de décalage du premier élément de l'ensemble d'élément correspondant par rapport au document. Voici un exemple simple:

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

Comment utiliser jQuery pour obtenir la position de la souris à l'intérieur d'un élément?

Pour obtenir la position de la souris à l'intérieur d'un élément, vous pouvez utiliser la méthode .offset() avec les propriétés pageX et pageY de l'objet de l'événement. Voici un exemple:

$("#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);
});

À quoi sert la méthode mousemove() dans jQuery?

La méthode

dans mousemove() jQuery est utilisée pour attacher une fonction de gestionnaire d'événements à l'événement mousemove, ou pour déclencher l'événement sur un élément. Cet événement est envoyé à l'élément lorsque le pointeur de la souris se déplace à l'intérieur de l'élément. Il peut être utilisé pour suivre le mouvement de la souris et effectuer des opérations en fonction de la position de la souris.

Comment utiliser jQuery pour obtenir la position du pointeur de la souris?

Vous pouvez utiliser jQuery pour obtenir la position du pointeur de la souris à l'aide des propriétés event.pageX et event.pageY. Ces propriétés fournissent des positions de pointeur de souris par rapport aux bords gauche et supérieur du document, respectivement.

Comment utiliser jQuery pour trouver la position de la souris par rapport à l'élément?

Pour trouver la position de la souris par rapport à l'élément, vous pouvez soustraire la position de l'élément de la position du pointeur de la souris. Voici un exemple:

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

Cela vous donnera la position du pointeur de la souris par rapport à l'élément spécifié.

a fait des ajustements subtils à l'exemple de code pour le rendre plus clair et plus facile à comprendre. De plus, le texte est poli pour le rendre plus lisse et plus naturel. x

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!