פתרון ל-bubbling עם jQuery

בעוד ש-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.

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

נגישות טכנית – פודקאסט ומבוא

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

רספברי פיי

התקנת OpenCanary על רספברי פיי

מה זה OpenCanary ואיך אפשר להתקין אותה על רספברי פיי ולשדרג את אבטחת הרשת הביתית או המשרדית.

DALL·E 2023-10-21 22.28.58 - Photo of a computer server room with red warning lights flashing, indicating a potential cyber threat. Multiple screens display graphs showing a sudde
יסודות בתכנות

מבוא לאבטחת מידע: IDOR

הסבר על התקפה אהובה ומוצלחת שבאמצעותה שואבים מידע מאתרים

תמונה של הבית הלבן עם מחשוב ענן וטקסט: FEDRAMP
פתרונות ומאמרים על פיתוח אינטרנט

FedRAMP & FIPS מבוא למתחילים

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

צילום מסך של סוואגר
יסודות בתכנות

openAPI

שימוש בתשתית הפופולרית למיפוי ותיעוד של API וגם הסבר בסיסי על מה זה API

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

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

גלילה לראש העמוד