פתרון ל-bubbling עם jQuery

כמעט כל אחד נתקל בבעיה שנגרמת בשל תכונת הבעבוע (bubbling) של JavaScript. אם יש לנו אלמנט A שנמצא בתוך אלמנט B ואנו לוחצים על אלמנט A, הלחיצה נחשבת גם על אלמנט B ותחשב כאירוע (גם) של אלמנט B. בעוד שבדרך כלל bubbling הוא דבר רצוי, לעתים הוא עלול לעורר בעיות, במיוחד אם שני האלמנטים משמשים לדברים אחרים.

בואו וניקח כדוגמא שני אלמנטים חביבים. הראשון הוא div שצבעו אפור ובתוכו (הס פן תעיר) יש div שצבעו ירוק:

Element A

Element B

וכך נראה ה-HTML שלהם. פשוט ביותר:


<div id="MyElementA" style="background-color: gray; clear: both; height: 200px; width: 200px;">
Element A
<div id="MyElementB" style="background-color: green; height: 100px; width: 100px; ">
Element B
</div>
</div>

נניח ואני רוצה ליצור שני אירועים. אירוע לחיצה עבור אלמנט A (שיגרור הופעת alert) ואירוע לחיצה עבור אלמנט B (שיגרור הופעת alert מסוג אחר לגמרי). עם jQuery זה אמור להיות קל ופשוט:


$(document).ready(function() {
     $('#MyElementA').click(function() {alert('A Is activated'});
     $('#MyElementB').click(function() {alert('B Is activated'});
});

אבל אם ננסה להפעיל את הקוד החביב שלנו, נגלה שלחיצה על B מפעילה גם את ה-alert של A!

Element A

Element B

זה קורה בגלל ה-bubbling. לחיצה על B מפעילה את כל האירועים הקשורים ללחיצה על A. ברוב המקרים זה לא מפריע לנו (וגם עוזר) אבל במקרה הזה זה בעייתי.

השאלה היא איך למנוע את זה? אם אני אדע בדיוק על מה אני לוחץ, אז אני יכול להשתמש במשפט תנאי פשוט. השאלה היא איך לדעת. כמובן שאפשר להתחיל לחשב את מקומו של העכבר ולשבור את הראש אבל למה לנו כאשר jQuery, כאשר אנו משתמשים ב-bind, מעבירה לנו אובייקט שבו יש פרטים רבים כולל סוג האלמנט שאנו לחצנו עליו? שימוש באובייקט יעזור לנו לכתוב משפט תנאי פשוט שיפריד בין סוגי הלחיצות.

איך עושים את זה?


$('#MyElementA').bind('click', function(event)
{
     if ($(event.target).is('#MyElementA'))
     {
          alert('A Is activated');
     }
     if ($(event.target).is('#MyElementB'))
     {
          alert('B Is activated');
     }
});

וכך זה נראה, נסו ותהנו!

Element A

Element B

איך זה עובד? פשוט ביותר, jQuery מאפשרת לי להעביר אובייקט (event) שבו יש מידע על… האירוע. חלק מהמידע הזה הוא מה היעד (target) של הלחיצה ובכך אני יכול לשים משפט תנאי שמורה לעשות פעולה אחת כאשר ה-target הוא אלמנט A ופעולה שניה כאשר ה-target הוא אלמנט B.

ותודה לשלומי צדוק על הרעיון.

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)

תגיות: , פורסם בקטגוריה: jQuery Scripts

אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיקכותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי

הטוויטר שלי

פרופיל הפייסבוק שלי

אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.