הבעיות האמיתיות מתחילות כאשר ישנם אלמנטים חופפים או שישנם אלמנטים אחרים בתוך האלמנטים שלנו.
נסביר.
נניח שיש לנו 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()"
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;
}
זה הכל,
עכשיו הפונקציה תופעל אך ורק אם באמת יצאנו בתוך הגבולות של האובייקט שלנו.
זה עובד בכל הדפדפנים.
בהצלחה!
תרגישו חופשי לומר לי אם משהו לא הלך.
אין תגובות:
הוסף רשומת תגובה
אני תמיד שמח לשמוע...
תרגישו חופשי