בעת עדכון דף אינטרנט או אתר אינטרנט, ישנם מצבים שבהם אין צורך עוד בקישורים כלולים או הופכים ללא רלוונטיים. בנוסף לכך, ניהול התנועה של אתר מסוים בצורה יעילה. במקרים כאלה, ביטול האירועים ב-JavaScript עושה פלאים בהשבתת פונקציונליות מסוימת ובטיפול בתרחישי מקרים כאלה.
כיצד לבטל אירועים ב-JavaScript?
ניתן להשתמש בגישות הבאות כדי לבטל אירועים ב-JavaScript:
-
- ' preventDefault() ' שיטה.
- ' ערך בוליאני 'גישה.
- ' stopPropagation() ' שיטה.
גישה 1: בטל אירועים ב-JavaScript באמצעות שיטת preventDefault()
ה ' preventDefault() ' השיטה מבטלת את האירוע המצורף אם ניתן לבטל אותו. ניתן להשתמש בשיטה זו כדי לנתק את האירוע המצורף מהקישור אליו ניגש, ובכך למנוע את ביצוע הפעולה.
תחביר
event.preventDefault ( )
בתחביר הנתון:
-
- ' מִקרֶה ' מתייחס לאירוע שיש לנתק.
דוגמא
עבור על קטע הקוד הנתון להלן:
< h3 > אירוע הקליק יבוטל ! h3 >
< א תְעוּדַת זֶהוּת = 'אֲתַר' href = 'https://www.google.com/' > בקר באתר גוגל א >
document.getElementById ( 'אֲתַר' ) .addEventListener ( 'נְקִישָׁה' , פוּנקצִיָה ( לְבַטֵל ) {
cancel.preventDefault ( ) ;
} ) ;
בצע את השלבים המפורטים להלן:
-
- ראשית, כלול את הכותרת המוצהרת שתוצג ב-Document Object Model (DOM).
- לאחר מכן, ציין את ' כתובת אתר ' משתמש ב ' href ' תכונה.
- כעת, בחלק ה-JavaScript של הקוד, גש לכתובת ה-URL שצוינה.
- כמו כן, צרף ' נְקִישָׁה ' אירוע עם כתובת האתר בעזרת פונקציה באמצעות ' addEventListener() ' שיטה.
- סוף - סוף, ה ' preventDefault() השיטה תיושם בעזרת הפרמטר של הפונקציה לניתוק האירוע המצורף.
תְפוּקָה
גישה 2: בטל אירועים ב-JavaScript על ידי החזרת ערך בוליאני
ניתן ליישם גישה זו על ידי החזרת ' שֶׁקֶר ” ערך בוליאני על האירוע המופעל.
דוגמא
שורות הקוד הבאות מדגימות את המושג המוצהר:
< מֶרְכָּז >< קֶלֶט סוּג = 'טֶקסט' מציין מיקום = 'הזן טקסט' oninput = 'cancelEvent()' > מֶרְכָּז >פוּנקצִיָה לבטל את האירוע ( ) {
לַחֲזוֹר שֶׁקֶר ;
עֵרָנִי ( 'הצהרה זו לא תוצג' )
}
בקטע הקוד שלמעלה:
-
- ראשית, בתוך ' <מרכז> ' תג, הקצאת שדה טקסט קלט.
- כמו כן, צרף ' oninput ' אירוע עם ' המצוין ' מציין מיקום ' ערך. זה יביא להפעלת הפונקציה שצוינה עם הזנת הטקסט.
- כעת, בחלק ה-JavaScript של הקוד, הכריז על פונקציה בשם ' cancelEvent() '. בהגדרתו, החזר את הערך הבוליאני ' שֶׁקֶר 'כדי לבטל את הכלול' מִקרֶה '.
- לבסוף, ציין את ההודעה המוצהרת בתיבת ההתראה. הערך הבוליאני המוחזר יגרום להימנעות מתיבת הדו-שיח שתוצג.
תְפוּקָה
בפלט לעיל, ניתן לראות כי עם הפונקציה שניגשת אליה, תיבת הדו-שיח של ההתראה אינה מוצגת ובכך מבטלת את האירוע המצורף.
גישה 3: בטל אירועים ב-JavaScript באמצעות שיטת stopPropagation()
ה ' stopPropagation() שיטה מונעת את הפצת אותו אירוע. ניתן להשתמש בשיטה זו כדי להפסיק את ההפצה בין שני ה-divs לאחר סימון תיבת הסימון.
תחביר
event.stopPropagation ( )
דוגמא
שים לב לשורות הקוד הבאות:
< מֶרְכָּז >< h3 > לחץ על האתר כדי לצפות בשינוי: h3 >< div בלחיצה = 'element2()' > לינוקס
< div בלחיצה = 'אלמנט1(אירוע)' > אתר אינטרנט div >
div >
< br >
סמן כדי להפסיק את ההפצה:
< קֶלֶט סוּג = 'תיבת סימון' תְעוּדַת זֶהוּת = 'חשבון' >
מֶרְכָּז >
-
- בשלב הראשון, באופן דומה, כלול את הכותרת האמורה.
- כעת, כלול שני ' div ' תגיות עם ' מצורפות ' בלחיצה ” אירועים כאשר כל אחד מהם מפעיל שתי פונקציות שונות element2() ו-element1().
- כמו כן, כלול תיבת סימון עם המזהה שצוין. תיבת סימון זו תגרום להפסקת ההפצה בין שני divs.
כעת, תסתכל על שורות הקוד הבאות של JavaScript:
פוּנקצִיָה אלמנט1 ( ו ) {עֵרָנִי ( 'לחצת על אתר' ) ;
אם ( document.getElementById ( 'חשבון' ) .בָּדוּק ) {
e.stopPropagation ( ) ;
}
}
פוּנקצִיָה אלמנט2 ( ) {
עֵרָנִי ( 'לחצת על Linuxhint' ) ;
}
בקוד js לעיל:
-
- הגדר פונקציה בשם ' element1() '. כאן, הפרמטר ' ו ' מתייחס ל ' מִקרֶה ' מופעל שצוין בחלק ה-HTML של הקוד.
- בהגדרתו, הצג את תיבת הדו-שיח של ההתראה עם ההודעה המוצהרת.
- לאחר מכן, גש לתיבת הסימון שנוצרה לפי המזהה שלה באמצעות ' getElementById() ' שיטה. כמו כן, החל את ' בָּדוּק ” מאפיין אותו על מנת לבדוק את מצב תיבת הסימון המסומנת.
- לאחר מכן, החל את ' stopPropagation() 'שיטה המתייחסת לפרמטר ' ו '. זה יביא לעצירת ההפצה מפונקציה אחת לפונקציה השנייה.
- באופן דומה, הגדר פונקציה נוספת ' element2() 'להפיץ עליו. פונקציה זו תהיה פונקציונלית לפני ההפצה בלבד.
תְפוּקָה
כאן, צופה בהתנהגות בלחיצה על ה-div עם סימון תיבת הסימון.
ריכזנו את הגישות לביטול אירועים ב-JavaScript.
סיכום
ה ' preventDefault() שיטת ', ה' ערך בוליאני הגישה ', או ה' stopPropagation() ניתן להשתמש בשיטה כדי לבטל אירועים ב-JavaScript. ניתן ליישם את השיטה הראשונה כדי לנתק את האירוע המצורף וכתוצאה מכך להשבית את הקישור. גישת הערך הבוליאני מחזירה את ' שֶׁקֶר ” ערך בוליאני על האירוע המופעל. ניתן ליישם את שיטת stopPropagation() כדי להפסיק את ההפצה בין שני ה-divs בעזרת תיבת סימון כלולה. מדריך זה הסביר כיצד לבטל אירועים ב-JavaScript.