jQueryの要素に対してマウスの相対位置を取得

次のjQueryコードスニペットを使用して、マウスポインターの相対的な位置を取得します。この関數(shù)は、マウスポインターの要素IDと現(xiàn)在のxおよびy座標(biāo)をパラメーターとして取得します。次に、マウスカーソルの現(xiàn)在の位置と指定された要素の間の相対距離を返します。

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

例の使用

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

    // 獲取鼠標(biāo)指針當(dāng)前的x和y坐標(biāo)
    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

マウスイベントを使用せずにjqueryを使用してマウスの位置を取得する方法は？

jQueryでは、マウスのイベントは通常、マウスの位置を取得するために使用されます。ただし、マウスイベントを使用せずにマウスの位置を取得したい場合は、.offset()メソッドを使用できます。このメソッドは、ドキュメントに対する一致する要素セットの最初の要素のオフセット座標(biāo)を返します。簡単な例を次に示します：

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

jQueryを使用してマウスの位置を要素內(nèi)で取得する方法は？

要素內(nèi)のマウスの位置を取得するには、イベントオブジェクトの.offset()およびpageXプロパティを使用してpageYメソッドを使用できます。例は次のとおりです。

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

jQueryでのmousemove()メソッドの使用は何ですか？

jQueryのmousemove()メソッドは、イベントハンドラー関數(shù)をmousemoveイベントに添付するか、要素のイベントをトリガーするために使用されます。このイベントは、マウスポインターが要素內(nèi)を移動すると、要素に送信されます。マウスの動きを追跡し、マウスの位置に応じて操作を?qū)g行するために使用できます。

jQueryを使用してマウスポインターの位置を取得する方法は？

jQueryを使用して、event.pageXプロパティとevent.pageYプロパティを使用してマウスポインターの位置を取得できます。これらの特性は、ドキュメントの左と上部のエッジに対するマウスポインター位置をそれぞれ提供します。

jqueryを使用して、要素に対するマウスの位置を見つける方法は？

要素に対するマウスの位置を見つけるには、マウスポインターの位置から要素の位置を差し引くことができます。例は次のとおりです。

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

これにより、指定された要素に対するマウスポインターの位置が得られます。

コードの例を微妙に調(diào)整して、より明確かつ理解しやすくします。 さらに、テキストは洗練されており、より滑らかで自然になります。 x

以上がjQuery相対マウスの位置を取得しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。