onmouseout אמיתי ב-Javascript

כמפתחים, אנו נתקלים הרבה פעמים בכך שאנחנו צריכים לבצע פעולה מסויימת כאשר העכבר יוצא מתוך אלמנט מסויים בדף שלנו. הבעיות האמיתיות מתחילות כאשר ישנם אלמנטים חופפים או שישנם אלמנטים אחרים בתוך האלמנטים שלנו.

למה אני מתכוון?
נניח שיש לנו Div בPosition Relative ובתוכו Div אחר ב-Position Absolute.
בתוך ה-div הזה, יש לנו לצורך העניין לינקים.

אנחנו רוצים, שכאשר העכבר יוצא מה-div הזה, נסתיר אותו.

פעולה מאוד פשוטה, שהמון מאיתנו שעובדים בתחום של Web נתקלים בה.
בואו ונראה את המצב.


ה-div הצהוב הוא ה-div שלנו ב-Position:relative, ובתוכו ישנו Div בPosition Absolute.
כך נראה ה-Css של הדף שלנו.

body
{
width:100%;
}
.mainContainer
{
width:100%;
text-align:center;
}
.mainContainer .content
{
width:500px;
height:500px;
margin:auto;
background-color:Yellow;
position:relative;
}
.mainContainer .content .innerFloatingDiv
{
position:absolute;
top:0px;
left:0px;
background-color:#CCCCCC;
width:200px;
height:200px;
}

עכשיו, תרחיש פשוט, נחבר פונקציה לOnMouseOut של ה-Div האפור ונציג Alert "אתה בחוץ" כאשר אנחנו יוצאים ממנו.
כך זה נראה.
בואו ונראה מה הבעיה,

אחרי שראיתם כאן בדיוק מה הבעיה, בוא ונראה כיצד ניתן לפתור אותה בצורה קלה ביותר.
לתוך הפונקציה שלנו שמקבלת את הOnMouseOut נוסיף פרמטר שהוא בעצם האובייקט שלנו (הDiv).
נחבר את האובייקט הזה לפונקציה שתחזיר לנו True – אם העכבר באמת יצא מהגבולות של האובייקט, וFalse אם לא.

בצורה כזו
כך הפעלנו קודם את הפונקציה.

div class="innerFloatingDiv" onmouseout="displayAlertOnRollOut()"

עכשיו, אנו נפעיל אותה כך, בעקבותיה באות הפונקציות ב-Javascript.

div class="innerFloatingDiv" onmouseout="displayAlertOnRollOut(this)"

function displayAlertOnRollOut(obj)
{
if(isMouseRealyOutOfObject(obj))
{
alert('אתה בחוץ');
}
}
function isMouseRealyOutOfObject(obj)
{
if (!window.event)
return true;
var event = window.event;
var oFrom = event.fromElement;
var oTo = event.toElement;
return (obj == oFrom || obj.contains(oFrom)) && !obj.contains(oTo) && obj != oTo;
}

זה הכל,
עכשיו הפונקציה תופעל אך ורק אם באמת יצאנו בתוך הגבולות של האובייקט שלנו.
זה עובד בכל הדפדפנים.

בהצלחה!

תרגישו חופשי לומר לי אם משהו לא הלך.

כתיבת תגובה

האימייל לא יוצג באתר. (*) שדות חובה מסומנים

*

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>