כיצד לדמות קליק באמצעות JavaScript?
ניתן ליישם את הגישות הבאות כדי להחיל סימולציית קליקים ב-JavaScript:
גישה 1: הדמיית קליק עם JavaScript באמצעות אירוע onclick
' בלחיצה אירוע מתרחש כאשר הלחצן נלחץ. ניתן ליישם גישה זו כדי להפעיל פונקציה בלחיצה על הכפתור ולהגדיל את ' ספירת קליקים ' בכל לחיצה על הכפתור.
הערת שוליים: ' בלחיצה ניתן להחיל אירוע פשוט על ידי הצמדתו לפונקציה מסוימת.
דוגמא
עבור על קטע הקוד הבא:
< מֶרְכָּז >
< סגנון h3 = 'צבע רקע: כחול בהיר;' > לחץ על סימולציה < לְהַקִיף מעמד = 'לספור' > לְהַקִיף > פִּי h3 >
< מזהה כפתור = 'btn1' בלחיצה = 'countClick()' > לחץ עלי ! לַחְצָן >
מֶרְכָּז >
- כלול את הכותרת שצוינה יחד עם ' ' תג כדי להגדיל את ' לספור ' של קליקים.
- בשלב הבא, צור כפתור עם מצורף ' בלחיצה ” אירוע מפנה מחדש לפונקציה countClick() שאליהם תיגש בלחיצת הכפתור.
כעת, בואו נעבור על שורות הקוד הבאות של JavaScript:
< תַסרִיט >
לתת לחיצות = 0 ;
פונקציה countClick ( ) {
קליקים = קליקים + 1 ;
מסמך. querySelector ( '.לספור' ) . textContent = קליקים ;
}
תַסרִיט >
בחלק ה-js שלעיל של הקוד:
- כאן, ראשית אתחול הקליקים עם ' 0 '.
- לאחר מכן, הכריז על פונקציה בשם ' countClick() '. בהגדרתו, הגדל את ה'אתחול' קליקים ' עם ' 1 '. זה יגרום להגדלת הספירה בכל פעם שהלחצן נלחץ.
- לבסוף, גש ל' לְהַקִיף ' רכיב באמצעות ' document.querySelector() ' שיטה. כמו כן, החל את ' textContent ” מאפיין כדי להקצות את ספירת הקליקים המוגדלת שדנו קודם לאלמנט span.
הפלט יהיה כדלקמן:
ניתן לראות את הפונקציונליות של הטיימר המוגדל בכל לחיצה בפלט לעיל.
גישה 2: הדמיית קליק עם JavaScript באמצעות שיטת addEventListener()
ה ' addEventListener() שיטת ” מקצה מטפל באירועים לאלמנט. ניתן ליישם שיטה זו על ידי הצמדת אירוע ספציפי לאלמנט והתראה למשתמש על הפעלת האירוע.
תחביר
אֵלֵמֶנט. addEventListener ( אירוע, פונקציה )בתחביר הנתון:
- ' מִקרֶה ' מתייחס לשם האירוע.
- ' פוּנקצִיָה ” מצביע על הפונקציה שיש לבצע כאשר האירוע מתרחש.
דוגמא
ההדגמה להלן מסבירה את הרעיון המוצהר:
< מֶרְכָּז >< גוּף >< a href = '#' תְעוּדַת זֶהוּת = 'קישור' > תלחץ על הקישור א >
גוּף > מֶרְכָּז >
< תַסרִיט >
להיות עז = מסמך. getElementById ( 'קישור' ) ;
לקבל. addEventListener ( 'נְקִישָׁה' , ( ) => עֵרָנִי ( 'לחץ על סימולציה!' ) )
תַסרִיט >
בקוד למעלה:
- ראשית, ציין ' לְעַגֵן ' תג כדי לכלול את הקישור שצוין
- בחלק ה-JavaScript של הקוד, גש לקישור שנוצר באמצעות ' document.getElementById() ' שיטה.
- לבסוף, החל את ' addEventListener() ' שיטת הגישה ל' קישור '. ה ' נְקִישָׁה ” מצורף אירוע במקרה זה שיביא להתראת המשתמש בלחיצה על הקישור שנוצר.
תְפוּקָה
גישה 3: הדמיית קליק עם JavaScript באמצעות שיטת click()
ה ' נְקִישָׁה() השיטה מבצעת סימולציית לחיצת עכבר על אלמנט. ניתן להשתמש בשיטה זו כדי לדמות לחיצה ישירות ללחצנים המצורפים כפי שהשם מציין.
תחביר
אֵלֵמֶנט. נְקִישָׁה ( )בתחביר הנתון:
- ' אֵלֵמֶנט ” מצביע על האלמנט שעליו תתבצע הקליק.
דוגמא
קטע הקוד הבא מסביר את המושג המוצהר:
< מֶרְכָּז >< גוּף >< h3 > האם מצאת זֶה עמוד מועיל ? h3 >
< כפתור בלחיצה = 'simulateClick()' תְעוּדַת זֶהוּת = 'לְחַקוֹת' > כן לַחְצָן >
< כפתור בלחיצה = 'simulateClick()' תְעוּדַת זֶהוּת = 'לְחַקוֹת' > לא לַחְצָן >
< h3 מזהה = 'רֹאשׁ' סִגְנוֹן = 'צבע רקע: ירוק בהיר;' > h3 >
גוּף > מֶרְכָּז >
- ראשית, כלול את הכותרת האמורה בתוך ' <מרכז> 'תג.
- לאחר מכן, צור שני כפתורים שונים עם המזהים שצוינו.
- כמו כן, צרף ' בלחיצה ” אירוע כאשר שניהם מפעילים את הפונקציה simulateClick().
- בשלב הבא, כלול כותרת נוספת עם ' תְעוּדַת זֶהוּת ' על מנת להודיע למשתמש ברגע ש' נְקִישָׁה ' מדומה.
כעת, עבור על שורות ה-JavaScript הבאות:
< תַסרִיט >פונקציה simulateClick ( ) {
מסמך. getElementById ( 'לְחַקוֹת' ) . נְקִישָׁה ( )
לתת לקבל = מסמך. getElementById ( 'רֹאשׁ' )
לקבל. innerText = 'לחץ על סימולציה!'
}
תַסרִיט >
- הגדר פונקציה ' simulateClick() '.
- כאן, גש ללחצנים שנוצרו באמצעות ' document.getElementById() שיטת ' וליישם את ' נְקִישָׁה() 'שיטה להם.
- כעת, באופן דומה, גש לכותרת שהוקצתה והחל את ' innerText ' מאפיין כדי להציג את ההודעה המוצהרת ככותרת בלחיצה המדומה.
תְפוּקָה
בפלט לעיל, ניכר ששני הכפתורים שנוצרו מדמים את הלחיצה.
בלוג זה מדגים כיצד ליישם סימולציית קליקים באמצעות JavaScript.
סיכום
' בלחיצה אירוע, ה' addEventListener() שיטת ', או ה' נְקִישָׁה() ניתן להשתמש בשיטה כדי לדמות קליק עם JavaScript. ' בלחיצה ניתן להחיל אירוע כדי לדמות לחיצה בכל פעם שהלחצן נלחץ בצורה של מונה. ה ' addEventListener() ניתן להשתמש בשיטה כדי לצרף אירוע לקישור ולהודיע למשתמש על סימולציית הקליק. ה ' נְקִישָׁה() ניתן להחיל את השיטה על הכפתורים שנוצרו ומבצעת את הפונקציונליות הנדרשת עבור כל אחד מהכפתורים. כתיבה זו מסבירה כיצד ליישם סימולציית קליקים ב-JavaScript.