תיאור:
מקשר מטפל אירוע לאירוע "mousemove" JavaScript, או מפעיל אירוע הזה על אלמנט.
.mousemove( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.mousemove( )
הוספה בגרסה: 1.0
.mousemove( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של .bind('mousemove', handler)
בוריאציה הראשונה, ו- .trigger('mousemove') בשניה.
אירוע mousemove נשלח לאלמנט, כאשר מצביע של עכבר זז בתוך האלמנט.
כל אלמנט HTML יכול לקבל אירוע הזה.
לדוגמא, נתבונן על HTML:
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
Move here
Trigger the handler
מטפל אירוע יכול להיות מקושר עם מטרה:
$('#target').mousemove(function(event) {
var msg = 'Handler for .mousemove() called at ' + event.pageX + ', ' + event.pageY;
$('#log').append('<div> + msg + '</div>');
});
עכשיו, כאשר מצביע של עכבר זז בתוך המטרה,
הודעות יצורפו ל-
<div id="log">:
Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)
אנחנו גם יכולים להפעיל אירוע, כאשר אובייקט שני נלחץ:
$('#other').click(function() {
$('#target').mousemove();
});
אחרי הפעלת קוד הזה, לחיצה על איזור הפעלה גם תציג הודעה:
Handler for .mousemove() called at (undefined, undefined)
במעקב אחרי תנועת עכבר, בדרך כלל אנחנו צריכים לדעת מיקום של מצביע העכבר.
אובייקט אירוע, שנשלח למטפל מחזיק מידע על קואורדינטות של עכבר.
מאפיינים, כמו
.clientX, .offsetX, ו- .pageX
זמינים, אבל תמיכה שונה בדפדפנים שונים.
למרבה המזל,
jQuery
מנרמל תכונות
.pageX ו- .pageY,
לכן, ניתן להשתמש בהן בכל הדפדפנים.
תכונות האלה הן קואורדינטות
X ו- Y
של מצביע יחסית לקרן שמאלי עליון של הדף,
כמו שהוצג בדוגמא מעל הפלט.
אנחנו צריכים לזכור, שאירוע
mousemove
מופעל,
בכל פעם, כאשר מצביע של עכבר זז, אפילו לפיקסל.
זה אומר, שמאות אירועים יכולים להיווצר על כמות קטנה מאוד של זמן.
אם מטפל צריך לעשות עיבוד נתונים משמעיתי, או אם מטפלים רבים קיימים לאירוע,
זה יכול להיות בריחת ביצועים חמורה עבור הדפדפן.
חשוב, לכן, לייעל מטפלי
mousemove
ככל האפשר,
ולשחרר אותם, ברגע שהם כבר לא זקוקים.
העיקרון הכללי הוא לקשר מטפל
mousemove
מתוך מטפל mousedown,
ולשחרר אותו ממטפל מתאים
mouseup.
אם יישום זה רצף של אירועים, תזכרו,
שאירוע
mouseup
ניתן לשלוח לאלמנט HTML אחר,
מאשר נשלח
mousemove.
כדי להסביר את זה, מטפל
mouseup
צריך להיות מקושר עם אלמנט למעלה בעץ
DOM,
כמו
<body>.
דוגמאות
מציג קואורדינטות, כשהמצביע של עכבר זז עובר מעל אלמנט div עם רקע צהוב. קואורדינטות, במקרה הזה, מוצגות יחסית ל- iframe.$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("(e.clientX, e.clientY)-"+clientCoords);
});
דוגמא - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("span:last").text("(e.clientX, e.clientY)-"+clientCoords); }); }); </script> <style> div { width:250px; height:170px; margin;10px; margin-right:50px; background:yellow; border:2px groove; float:right; } p { margin:0; margin-left:10px; color:red; width:250px; height:120px; padding-top:70px; float:left; font-size:14px; } span { display:block; } </style> </head> <body> <p> Try scrolling too. <span>Move the mouse over the div.</span> <span> </span> </p> <div></div> </body> </html>
האם מידע זה היה מועיל?
