תיאור: מקשר מטפל אירוע להפעלה, כאשר מצביע של עכבר עוזב את האלמנט, או מפעיל מטפל הזה על האלמנט.
.mouseleave( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.mouseleave( )
הוספה בגרסה: 1.0
.mouseleave( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של .bind('mouseleave', handler)
בוריאציה הראשונה, ו- .trigger('mouseleave') בשניה.
אירוע mouseleave JavaScript
הוא של Internet Explorer. בשל התועלת הכללית של האירוע,
jQuery המדמה אירוע זה, כך ניתן להשתמש בו ללא תלות בדפדפן.
אירוע הזה נשלח לאלמנט, כאשר מצביע של עכבר נכנס בתוך האלמנט.
כל האלמנטים של
HTML יכולים לקבל אירוע הזה.
לדוגמא, נתבונן על HTML:
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div>
Outer
Inner
Trigger the handler
מטפל אירוע ניתן לקשר לכל אלמנט:
$('#outer').mouseleave(function() {
$('#log').append('<div>Handler for .mouseleave() called.</div>');
});
עכשיו, כאשר מצביע של עכבר יוצאה מ- Outer <div>,
הודעה מצורפת ל-
<div id="log">.
אנחנו גם יכולים להפעיל אירוע כשה אלמנט אחר נלחץ:
$('#other').click(function() {
$('#outer').mouseleave();
});
אחרי ביצוע קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
אירוע mouseleave נבדל מ- mouseout
בדרך העברת מטפל אירוע.
אם mouseout
השתמשו בדוגמה זו,
ואז כאשר מצביע של עכבר עוזב את אלמנט
Inner,
מטפל יופעל.
זה בדרך כלל התנהגות לא רצויה.
אירוע mouseleave,
מצד שני, רק מפעיל מטפל שלו, כאשר עכבר עוזב את האלמנט המקושר אליו,
לא צאצא.
לכן בדוגמא הזו, מטפל מופעל, כאשר עכבר עוזב אלמנט
Outer,
ולא אלמנט
Inner.
דוגמאות
מציג טקסט כשה אירועים mouseover ו- mouseleave מופעלים. Mouseout מופעל כשהמצביע של עכבר נכנס בתוך או יוצא מאלמנט הילד, בזמן שאירוע mouseleave לא עושה זאת.
var i = 0;
$("div.overout").mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
דוגמא - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var i = 0; $("div.overout").mouseout(function(){ $("p:first",this).text("mouse out"); $("p:last",this).text(++i); }).mouseover(function(){ $("p:first",this).text("mouse over"); }); var n = 0; $("div.enterleave").mouseenter(function(){ $("p:first",this).text("mouse enter"); }).mouseleave(function(){ $("p:first",this).text("mouse leave"); $("p:last",this).text(++n); }); }); </script> <style> div.out { width:40%; height:120px; margin:0 15px; background-color:#D6EDFC; float:left; } div.in { width:60%; height:60%; background-color:#FFCC00; margin:10px auto; } p { line-height:1em; margin:0; padding:0; } </style> </head> <body> <div class="out overout"><p>move your mouse</p> <div class="in overout"><p>move your mouse </p><p>0</p></div><p>0</p></div> <div class="out enterleave"><p>move your mouse</p> <div class="in enterleave"> <p>move your mouse</p><p>0 </p></div><p>0</p></div> </body> </html>
האם מידע זה היה מועיל?
