במאמר זה נלמד כיצד להשבית את אירוע הקליק באמצעות CSS.

אז הבה נתחיל!

כיצד להשבית אירוע קליק באמצעות CSS?

אתה יכול להשבית אירועי קליקים באמצעות ה-CSS ' אירועי מצביע ' תכונה. אבל, כשנקפוץ לתוך זה, נסביר לך את זה בקצרה.

מהו מאפיין CSS 'מצביע-אירועים'?

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

תחביר
התחביר של אירועי מצביע הוא כדלקמן:

המאפיין שהוזכר לעיל לוקח שני ערכים, כגון ' אוטומטי ' ו' אף אחד ”:

• אוטומטי: הוא משמש לביצוע אירועי ברירת מחדל.
• אף אחד: הוא משמש כדי להשבית אירועים.

הערה: הדוגמה הנתונה להלן תראה תחילה כיצד להוסיף שני כפתורים פעילים, ולאחר מכן נשבית את אירוע הלחיצה של הכפתור השני.

דוגמה 1: השבתת אירוע קליק של לחצנים באמצעות CSS
בדוגמה זו, ניצור כותרת

ושני כפתורים. לאחר מכן, ציין את ' לַחְצָן ' כשם הכיתה של הכפתור הראשון, והקצה ' לַחְצָן ' ו' כפתור 2 ” כמו השיעורים של הכפתור השני.

HTML

< div >
< h1 > השבת אירוע קליק באמצעות CSS < / h1 >
< לַחְצָן מעמד = 'לַחְצָן' > כפתור הפעל < / לַחְצָן >
< לַחְצָן מעמד = 'כפתור כפתור2' > כפתור השבת < / לַחְצָן >
< / div >

ב-CSS, ' .לַחְצָן ' משמש לגישה לשני הכפתורים שנוצרו בקובץ ה-HTML. לאחר מכן, הגדר את סגנון הגבול כ' אף אחד ' ולתת ריפוד כ' 25 פיקסלים '. לאחר מכן, הגדר את צבע הטקסט של הכפתור כ' rgb(29, 6, 31) ' ורקע הכפתור בתור ' rgb(19, 192, 163) '. אנו גם נגדיר את הרדיוס של כפתור כ' 5 פיקסלים '.

CSS

.לַחְצָן {
גבול : אף אחד ;
ריפוד : 25 פיקסלים ;
צֶבַע : rgb ( 29 , 6 , 31 ) ;
צבע רקע : rgb ( 19 , 192 , 163 ) ;
רדיוס הגבול : 5 פיקסלים ;
}

לאחר מכן, נחיל את ה-:active pseudo-class על שני הכפתורים בתור ' .button:active ' והגדר את צבע הכפתור כ' rgb(200, 255, 0) ”:

.לַחְצָן : פָּעִיל {
צבע רקע : rgb ( 209 , 65 , 65 ) ;
}

כתוצאה מכך, תראה את התוצאה הבאה:

כעת, נעבור לחלק הבא בו נשבית את אירוע הקליק עבור הכפתור השני.

כדי לעשות זאת, השתמש ב' .button2 ' כדי לגשת ללחצן השני, שנוצר בקובץ ה-HTML, ולאחר מכן, הגדר את הערך של מאפיין pointer-events כ' אף אחד ”:

.button2 {
אירועי מצביע : אף אחד ;
}

שימוש במאפיין pointer-events והגדרת הערך שלו ל-non ישבית את אירוע הקליק, אותו ניתן לראות בפלט הבא:

סיפקנו את השיטה הקלה ביותר להשבית את אירוע הקליק באמצעות CSS.

סיכום

כדי להשבית את אירוע הקליק ב-HTML, ' אירועי מצביע נעשה שימוש במאפיין של CSS. למטרה זו, הוסף אלמנט HTML והגדר את הערך של מאפיין pointer-events כ' אף אחד ' כדי להשבית את אירוע הקליק שלו. מאמר זה הסביר כיצד להשבית את אירוע הקליק באמצעות CSS יחד עם הדוגמה שלו.