תיאור:
מקשר מטפל אירוע לאירוע "mouseout" JavaScript, או מפעיל אירוע הזה על אלמנט.
.mouseout( handler(eventObject) )
הוספה בגרסה: 1.0
handler(eventObject)
פונקציה מופעלת כל פעם, כאשר מופעל אירוע.
.mouseout( )
הוספה בגרסה: 1.0
.mouseout( [ eventData ], handler(eventObject) )
הוספה בגרסה: 1.4.3
eventData
המפה של הנתונים שתעבור למטפל האירוע.
handler(eventObject)
פונקציה לביצוע כל פעם שאירוע מופעל.
שיטה הזו היא קיצור של .bind('mouseout', handler) בוריאציה הראשונה, ו- .trigger('mouseout') בשניה.
אירוע mouseout נשלח לאלמנט, כאשר מצביע של עכבר עוזב את האלמנט.
כל אלמנט HTML יכול לקבל אירוע הזה.
לדוגמא, נתבונן על HTML:
<div id="target"> Move here </div> <div id="other"> Trigger the handler </div> <div id="log"></div>
Move here
Trigger the handler
מטפל אירוע ניתן לקשר לכל אלמנט:
$('#outer').mouseout(function() {
$('#log').append('Handler for .mouseout() called.');
});
עכשיו, כאשר מצביע של עכבר יוצאה מ-
Outer <div>,
ההודעה תצורף ל-
<div id="log">.
אנחנו גם יכולים להפעיל אירוע, כאשר אובייקט שני נלחץ:
$('#other').click(function() {
$('#outer').mouseout();
});
אחרי הפעלת קוד הזה, לחיצה על Trigger the handler גם תציג הודעה.
סוג אירוע הזה יכול לגרום לכאב ראש רבים בשל מבעבע האירוע.
למשל, כאשר מצביע של עכבר יוצאה מאלמנט
Inner בדוגמא הזו, אירוע
mouseout
ישלח עליו, ואחרי זה על
Outer.
זה יכול לגרום לקפיצה אל מטפל
mouseout
בזמן הלא מתאים.
ראו דיון על
.mouseleave()
לחלופה שימושית.
דוגמאות
מציג טקסט כשה אירועים mouseover ו- mouseout מופעלים. 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").bind("mouseenter",function(){
$("p:first",this).text("mouse enter");
}).bind("mouseleave",function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
דוגמא - קוד מלא:
<!DOCTYPE htmlgt; <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").bind("mouseenter",function(){ $("p:first",this).text("mouse enter"); }).bind("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>
האם מידע זה היה מועיל?
