jQuery 3.3

.mousemove()




jquery

.mousemove (معالج) الإرجاع: jQuery

الوصف ؛: ربط معالج أحداث بحدث JavaScript "mousemove" ، أو تشغيل هذا الحدث على عنصر.

  • الإصدار المضاف: 1.0 .mousemove (معالج)

    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضافة: 1.4.3 .mousemove ([eventData] ، معالج)

    • eventData
      النوع: Anything
      كائن يحتوي على بيانات سيتم تمريرها إلى معالج الحدث.
    • معالج
      النوع: Function ( Event eventObject)
      هي وظيفة يتم تنفيذها في كل مرة يتم فيها تشغيل الحدث.
  • الإصدار المضاف: 1.0 .mousemove()

    • هذا التوقيع لا يقبل أي حجج.

هذه الطريقة هي اختصار لـ .on( "mousemove", handler ) في أول .trigger( "mousemove" ) ، و .trigger( "mousemove" ) في الثلث.

يتم إرسال حدث mousemove إلى عنصر عندما يتحرك مؤشر الماوس داخل العنصر. يمكن لأي عنصر HTML تلقي هذا الحدث.

على سبيل المثال ، ضع في اعتبارك HTML:

<div id="target">
  Move here
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

يمكن ربط معالج الحدث بالهدف:

$( "#target" ).mousemove(function( event ) {
  var msg = "Handler for .mousemove() called at ";
  msg += event.pageX + ", " + event.pageY;
  $( "#log" ).append( "<div>" + msg + "</div>" );
});

الآن عندما يتحرك مؤشر الماوس داخل الزر الهدف ، يتم إلحاق الرسائل بـ <div id = "log">:

معالج لـ .mousemove () دعا في (399 ، 48)
معالج لـ .mousemove () دعا في (398 ، 46)
معالج لـ .mousemove () دعا في (397 ، 44)
معالج لـ .mousemove () دعا في (396 ، 42)

لتشغيل الحدث يدويًا ، طبّق .mousemove() بدون وسيطة:

$( "#other" ).click(function() {
  $( "#target" ).mousemove();
});

بعد تنفيذ هذه التعليمة البرمجية ، سيؤدي النقر فوق الزر Trigger إلى إلحاق الرسالة أيضًا:

معالج لـ .mousemove () دعا في (غير محدد ، غير محدد)

عند تتبع حركة الماوس ، تحتاج عادةً إلى معرفة الموضع الفعلي لمؤشر الماوس. يحتوي كائن الحدث الذي تم تمريره إلى المعالج على بعض المعلومات حول إحداثيات الماوس. تتوفر خصائص مثل .clientX و .offsetX و .pageX ، ولكن يختلف الدعم لها بين المتصفحات. لحسن الحظ ، يعمل jQuery على .pageX خصائص .pageY و .pageY بحيث يمكن استخدامها في جميع المتصفحات. توفر هذه الخصائص إحداثيات X و Y الخاصة بمؤشر الماوس الخاص بالزاوية العلوية اليسرى من المستند ، كما هو موضح في المثال أعلاه.

ضع في اعتبارك أن حدث mousemove يتم تشغيله كلما تحرك مؤشر الماوس ، حتى لو كانت وحدة البكسل. هذا يعني أنه يمكن إنشاء مئات الأحداث خلال فترة زمنية قصيرة جدًا. إذا كان على المعالج القيام بأية معالجة مهمة ، أو في حالة وجود معالجات متعددة للحدث ، يمكن أن يكون هذا استنزافًا خطيرًا للأداء على المتصفح. من المهم ، لذلك ، تحسين معالجات mousemove قدر الإمكان ، mousemove بمجرد أنها لم تعد هناك حاجة إليها.

النمط الشائع هو ربط معالج mousemove من داخل mousedown ، و mousedown فإنه من معالج mouseup المقابلة. في حالة تنفيذ تسلسل الأحداث هذا ، تذكر أنه قد يتم إرسال حدث mouseup إلى عنصر HTML مختلف عن الحدث mousemove . لحساب هذا ، يجب أن يكون معالج mouseup عادةً مرتبطًا بعنصر مرتفع في شجرة DOM ، مثل <body> .

ملاحظات إضافية:

  • نظرًا .mousemove() طريقة .mousemove() هي مجرد اختصار لـ .on( "mousemove", handler ) ، يمكن .off( "mousemove" ) باستخدام .off( "mousemove" ) .

مثال:

إظهار إحداثيات الماوس عند تحريك الماوس فوق div الأصفر. الإحداثيات بالنسبة إلى النافذة ، وهي في هذه الحالة هي iframe.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mousemove demo</title>
  <style>
  div {
    width: 220px;
    height: 170px;
    margin: 10px 50px 10px 10px;
    background: yellow;
    border: 2px groove;
    float: right;
  }
  p {
    margin: 0;
    margin-left: 10px;
    color: red;
    width: 220px;
    height: 120px;
    padding-top: 70px;
    float: left;
    font-size: 14px;
  }
  span {
    display: block;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
  <span>Move the mouse over the div.</span>
  <span>&nbsp;</span>
</p>
<div></div>
 
<script>
$( "div" ).mousemove(function( event ) {
  var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
  $( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
  $( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );
});
</script>
 
</body>
</html>

عرض: