בשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות
-
@zvizvi אין לי דעה בכל הנושא פה (אני לא מרגיש בנח מהפתרונות וגם לא מבין את בעיית הדבל קליק), אבל הקוד שלך לא קצר ולא נקי ולא אלגנטי... אם יש לך עשר מטפלים לאירועים שונים, אתה צריך עשרה משתנים חדשים (בזה הקוד של אהרון קצת מסדר), הקוד שלך מתנפח, צריך "לזכור" בסוף הפונקציה להדליק, צריך לטפל בשגיאות. בקיצור, אתה נשמע אחד שאוהב את הישן והטוב ומחפש תירוצים.
אתה יכול לומר שאתה מעדיף אותו ואני מבין אותך ועושה כמוך, אבל אני צריך למצוא תשובה נכונה יותר למה אני כך עושה.
אלא"כ לא הבנתי אותך ואתה מתכוון שהדיירקטיב או הקוד הגנרי צריך להיות בסגנון הזה, בזה אני מסכים. ואני מתנגד (או יותר נכון לא מבין את הצורך) לטיימהאוט.@dovid אמר בבשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות:
ואני מתנגד (או יותר נכון לא מבין את הצורך) לטיימהאוט.
רבי דוד??????????
אין דרך נקייה אחרת לטפל בזה, אירוע דאבל קליק מבוסס על זמן, לא על משהו אחר (וכידוע בשם איינשטיין כששאלו אותו מה זה זמן? הוא ענה: "זמן זה הדבר שאותו אנו מודדים באמצעות שעון"...).
אם אתה רוצה שהדיירקטיב ינהל לך גם את הפונקציות, אז אני כבר לא יודע מה לומר.... בעיקרון אירוע זה אירוע, יורים אותו, ואז הפונקציה שלך מטופלת בקוד, אתה לא מעביר פונקציות לטיפול בתוך הדיירקטיב, צר לי (זה כמו שכשאשתך אומרת לך ללכת לקניות אתה מבין לבד שהיא לא מתכוונת לבוא איתך למכולת...). -
@zvizvi אין לי דעה בכל הנושא פה (אני לא מרגיש בנח מהפתרונות וגם לא מבין את בעיית הדבל קליק), אבל הקוד שלך לא קצר ולא נקי ולא אלגנטי... אם יש לך עשר מטפלים לאירועים שונים, אתה צריך עשרה משתנים חדשים (בזה הקוד של אהרון קצת מסדר), הקוד שלך מתנפח, צריך "לזכור" בסוף הפונקציה להדליק, צריך לטפל בשגיאות. בקיצור, אתה נשמע אחד שאוהב את הישן והטוב ומחפש תירוצים.
אתה יכול לומר שאתה מעדיף אותו ואני מבין אותך ועושה כמוך, אבל אני צריך למצוא תשובה נכונה יותר למה אני כך עושה.
אלא"כ לא הבנתי אותך ואתה מתכוון שהדיירקטיב או הקוד הגנרי צריך להיות בסגנון הזה, בזה אני מסכים. ואני מתנגד (או יותר נכון לא מבין את הצורך) לטיימהאוט.@dovid אמר בבשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות:
@zvizvi אין לי דעה בכל הנושא פה (אני לא מרגיש בנח מהפתרונות וגם לא מבין את בעיית הדבל קליק), אבל הקוד שלך לא קצר ולא נקי ולא אלגנטי... אם יש לך עשר מטפלים לאירועים שונים, אתה צריך עשרה משתנים חדשים (בזה הקוד של אהרון קצת מסדר), הקוד שלך מתנפח, צריך "לזכור" בסוף הפונקציה להדליק, צריך לטפל בשגיאות. בקיצור, אתה נשמע אחד שאוהב את הישן והטוב ומחפש תירוצים.
אתה יכול לומר שאתה מעדיף אותו ואני מבין אותך ועושה כמוך, אבל אני צריך למצוא תשובה נכונה יותר למה אני כך עושה.
אלא"כ לא הבנתי אותך ואתה מתכוון שהדיירקטיב או הקוד הגנרי צריך להיות בסגנון הזה, בזה אני מסכים. ואני מתנגד (או יותר נכון לא מבין את הצורך) לטיימהאוט.מה שהתכוונתי להדגיש הוא שאין מנוס מלקבוע ידנית מתי הפונקציה 'בביצוע' ומתי הפעולה הסתיימה. ולרוב זה לא תלוי זמן.
אם כבר ליצור אבסטרקציה, הייתי יוצר סרוויס גנרי שכל פונקציה תלוית לחיצה תקרא לו פעמיים במהלך מחזור החיים שלה.
פעם בהתחלה - ואז הסרוויס ירים את הדגל ובמקביל אם הוא נתקל בדגל הוא עוצר את הכל - פעם בסוף בשביל לכבות את הדגל. -
@ארכיטקט אתה משרטט בראשית דבריך (בכשרון ספרותי רב, תוך כדי הרבה דראמה) את תיאור הבעיה. אתה טוען שיש עמרצים שחושבים שעל כל פעולה צריך לעשות קליק כפול, ואז הם מתפלאים למה זה לא עבד? אני מכיר את האנשים האלו, נפגשתי איתם הרבה. אם זו באמת כל הבעיה שבאת לפתור אז יש פתרון מושלם, נקי, ואלגנטי, וגם בלי צורך בטיימאאוט (את הפתרון אביא בקטע הבא) אבל אם כן לא הבנתי למה אתה נותן אפשרות של
ignoreSingleClickWhenDblClick = true? אתה הרי לא מעוניין כלל בדאבל קליק, רק בסינגל!? אתה אמור לרצות בדיוק הפוך -ignoreDoubleClickולמען האמת אין צורך להתעלם ממנו, פשוט לא מאזינים לו! ואם כן כל מה שצריך הוא למצוא דרך להתעלם מהסינגל קליק השני כאשר הוא חלק מדאבל, שזה לא מצריך טיימאאוט (וזו כנראה קושיית ר' @dovid ). כדי ליישב את הקושי הנ"ל, הבנתי שאתה רוצה לטפל בעוד מקרה שהוא אומנם פחות נפוץ, והוא שאתה רוצה לעשות פעולה A במקרה של סינגל קליק, ופעולה B במקרה של דאבל קליק. כדי לדעת אם לעשות פעולה A כאשר מקבלים ארוע קליק, באמת חייבים לחכות ולראות אם הפעולה יסתיים כדאבל קליק או לא. זו באמת בעיה יותר מסובכת. אבל נראה שאפשר לפותרה בצורה מושלמת גם כן, רק שעוד לא בישלתי את הפתרון...בחזרה לבעיה הראשונה (התעלמות מקליק שני ברצף) הפתרון הכי טוב (לענ"ד) הוא כך (אני מנסה לכתוב אותו כדיירקטיב אנגולארי למרות שאני לא מספיק מכיר):
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; @Directive({ selector: '[mtrSingleClick]' }) export class SingleClickDirective { @Input() public stopPropagation = false; @Input() public IETimeoutInterval = 500; @Output() singleClick = new EventEmitter<any>(); private IEClickEventIsInProgress = false; private IETimeout; @HostListener('click', ['$event']) onClick ($event): void { if (this.stopPropagation) { $event.stopPropagation(); } if ($event.detail > 1) { // See: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail return; } if (isIE) { // IE apparently doesn't support event.detail if (this.IEClickEventIsInProgress) { return this.IEUpdateTimeout(); } this.IEIsClickEventInProgress = true; this.IEUpdateTimeout(); } this.singleClick.emit($event); } IEUpdateTimeout() { if (this.IETimeout) { clearTimeout(this.IETimeout); } this.IETimeout = setTimeout(this.IETimeoutHandler, this.IETimeoutInterval); } IETimeoutHandler() { this.IEClickEventIsInProgress = false; } constructor() { } }שים לב שאם אתה לא רוצה/צריך לתמוך ב-IE ע"ה, הקוד הוא קצר מאוד.
הקוד הזה מכבד את הגדרת מערכת ההפעלה של שיעור דאבל קליק במקרה שלא מדובר ב-IE.📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה
-
@dovid אמר בבשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות:
@zvizvi אין לי דעה בכל הנושא פה (אני לא מרגיש בנח מהפתרונות וגם לא מבין את בעיית הדבל קליק), אבל הקוד שלך לא קצר ולא נקי ולא אלגנטי... אם יש לך עשר מטפלים לאירועים שונים, אתה צריך עשרה משתנים חדשים (בזה הקוד של אהרון קצת מסדר), הקוד שלך מתנפח, צריך "לזכור" בסוף הפונקציה להדליק, צריך לטפל בשגיאות. בקיצור, אתה נשמע אחד שאוהב את הישן והטוב ומחפש תירוצים.
אתה יכול לומר שאתה מעדיף אותו ואני מבין אותך ועושה כמוך, אבל אני צריך למצוא תשובה נכונה יותר למה אני כך עושה.
אלא"כ לא הבנתי אותך ואתה מתכוון שהדיירקטיב או הקוד הגנרי צריך להיות בסגנון הזה, בזה אני מסכים. ואני מתנגד (או יותר נכון לא מבין את הצורך) לטיימהאוט.מה שהתכוונתי להדגיש הוא שאין מנוס מלקבוע ידנית מתי הפונקציה 'בביצוע' ומתי הפעולה הסתיימה. ולרוב זה לא תלוי זמן.
אם כבר ליצור אבסטרקציה, הייתי יוצר סרוויס גנרי שכל פונקציה תלוית לחיצה תקרא לו פעמיים במהלך מחזור החיים שלה.
פעם בהתחלה - ואז הסרוויס ירים את הדגל ובמקביל אם הוא נתקל בדגל הוא עוצר את הכל - פעם בסוף בשביל לכבות את הדגל. -
@ארכיטקט אתה משרטט בראשית דבריך (בכשרון ספרותי רב, תוך כדי הרבה דראמה) את תיאור הבעיה. אתה טוען שיש עמרצים שחושבים שעל כל פעולה צריך לעשות קליק כפול, ואז הם מתפלאים למה זה לא עבד? אני מכיר את האנשים האלו, נפגשתי איתם הרבה. אם זו באמת כל הבעיה שבאת לפתור אז יש פתרון מושלם, נקי, ואלגנטי, וגם בלי צורך בטיימאאוט (את הפתרון אביא בקטע הבא) אבל אם כן לא הבנתי למה אתה נותן אפשרות של
ignoreSingleClickWhenDblClick = true? אתה הרי לא מעוניין כלל בדאבל קליק, רק בסינגל!? אתה אמור לרצות בדיוק הפוך -ignoreDoubleClickולמען האמת אין צורך להתעלם ממנו, פשוט לא מאזינים לו! ואם כן כל מה שצריך הוא למצוא דרך להתעלם מהסינגל קליק השני כאשר הוא חלק מדאבל, שזה לא מצריך טיימאאוט (וזו כנראה קושיית ר' @dovid ). כדי ליישב את הקושי הנ"ל, הבנתי שאתה רוצה לטפל בעוד מקרה שהוא אומנם פחות נפוץ, והוא שאתה רוצה לעשות פעולה A במקרה של סינגל קליק, ופעולה B במקרה של דאבל קליק. כדי לדעת אם לעשות פעולה A כאשר מקבלים ארוע קליק, באמת חייבים לחכות ולראות אם הפעולה יסתיים כדאבל קליק או לא. זו באמת בעיה יותר מסובכת. אבל נראה שאפשר לפותרה בצורה מושלמת גם כן, רק שעוד לא בישלתי את הפתרון...בחזרה לבעיה הראשונה (התעלמות מקליק שני ברצף) הפתרון הכי טוב (לענ"ד) הוא כך (אני מנסה לכתוב אותו כדיירקטיב אנגולארי למרות שאני לא מספיק מכיר):
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; @Directive({ selector: '[mtrSingleClick]' }) export class SingleClickDirective { @Input() public stopPropagation = false; @Input() public IETimeoutInterval = 500; @Output() singleClick = new EventEmitter<any>(); private IEClickEventIsInProgress = false; private IETimeout; @HostListener('click', ['$event']) onClick ($event): void { if (this.stopPropagation) { $event.stopPropagation(); } if ($event.detail > 1) { // See: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail return; } if (isIE) { // IE apparently doesn't support event.detail if (this.IEClickEventIsInProgress) { return this.IEUpdateTimeout(); } this.IEIsClickEventInProgress = true; this.IEUpdateTimeout(); } this.singleClick.emit($event); } IEUpdateTimeout() { if (this.IETimeout) { clearTimeout(this.IETimeout); } this.IETimeout = setTimeout(this.IETimeoutHandler, this.IETimeoutInterval); } IETimeoutHandler() { this.IEClickEventIsInProgress = false; } constructor() { } }שים לב שאם אתה לא רוצה/צריך לתמוך ב-IE ע"ה, הקוד הוא קצר מאוד.
הקוד הזה מכבד את הגדרת מערכת ההפעלה של שיעור דאבל קליק במקרה שלא מדובר ב-IE.@yossiz כמו תמיד צללת לבעיה הטכנית ודילגת על הבנת הצורך (היותר סוציאלי)
ברור כשמש שלא צריך את דאבל קליק, זה לא ידידותי לעשות בממשק אינטרנט פעולה שצריכה דאבל קליק כי זה חיה שלא ממש קיימת שם.
ואין לי תשובה על השאלה למה צריך טימהאוט, מלבד שארכיטקט התחיל עם גישה להאזין לקליק האחרון בסדרת ההקלקות של המשתמש.@zvizvi אמר בבשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות:
מה שהתכוונתי להדגיש הוא שאין מנוס מלקבוע ידנית מתי הפונקציה 'בביצוע' ומתי הפעולה הסתיימה. ולרוב זה לא תלוי זמן.
לא מסכים איתך. אם יש פונקציה עוטפת, שמחכה לתוצאת (פרומייז) הפונקציה המטפלת ורק אז מאפשרת את הלחצן שוב, הכל יעבוד יופי.
- מנטור אישי בתכנות והמסתעף – להתקדם לשלב הבא!
- בכל נושא אפשר ליצור קשר dovid@tchumim.com
-
@yossiz כמו תמיד צללת לבעיה הטכנית ודילגת על הבנת הצורך (היותר סוציאלי)
ברור כשמש שלא צריך את דאבל קליק, זה לא ידידותי לעשות בממשק אינטרנט פעולה שצריכה דאבל קליק כי זה חיה שלא ממש קיימת שם.
ואין לי תשובה על השאלה למה צריך טימהאוט, מלבד שארכיטקט התחיל עם גישה להאזין לקליק האחרון בסדרת ההקלקות של המשתמש.@zvizvi אמר בבשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות:
מה שהתכוונתי להדגיש הוא שאין מנוס מלקבוע ידנית מתי הפונקציה 'בביצוע' ומתי הפעולה הסתיימה. ולרוב זה לא תלוי זמן.
לא מסכים איתך. אם יש פונקציה עוטפת, שמחכה לתוצאת (פרומייז) הפונקציה המטפלת ורק אז מאפשרת את הלחצן שוב, הכל יעבוד יופי.
@dovid לאיזה חלק מדבריי אתה מתייחס? לא הבנתי
📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה
-
@zvizvi הנושא של האזנה גם לדבל קליק והתעלמות מההקלקה הראשונה נובע מתרחיש שבו מרימים דיאלוג, והוא נסגר בגלל הלחיצה השניה. הסברתי את זה בפתח דבריי.
זה גם לא נכון שאין לחיצות כפולות באינטרנט, כשאתה מדבר על אפליקציה כבדה אין לך הרבה לאן לברוח, כמות האירועים מוגבלת, ואתה שורף מהר מאוד את האופציות של לחיצה בודדת, כפולה, שמאלית, ימנית, אמצעית, אנטר, טאב ועוד היד נטויה. אלא אם כן יש לך מקום לארבע מאות כפתורים בכל ס"מ מסך.
נראה לי שאני צריך להרים פרוייקט קטן (אולי אעשה זאת בהמשך) כדי להמחיש מה קורה למישהו שמרים דיאלוג והוא נסגר לו בפנים, בגלל לחיצה כפולה. או שנפתחים 2 דיאלוגים אחד על גבי השני ואחד מעודכן והשני לא וכשהוא סוגר את הראשון השני עדיין צף, עם הנתונים הישנים. אלו בעיות שהעולם מתמודד איתם מאז מלחמת העולם השניה.ואסיים בסיפור, מישהו פירסם מודעה דרוש שותף לטיול קשוח ביותר ביערות הגשם מקום שלא דרכה שם כף רגל אדם מעולם, למיטיבי לכת ולאוהבי הרפתקאות בלבד. התקשר אליו מישהו
"בקשר למודעה על הטיול"
כן, בן כמה אתה? 96
עשית טיולים כאלו בעבר? לא
אתה אוהב לטייל באופן כללי? לא
אתה בכושר גופני? ממש לא, אני בקושי זז.
אז למה התקשרת? תראה ראיתי את המודעה שלך הבנתי שאתה מחפש פרטנר לטיול שלך, אמרתי לעצמי אני בוודאי לא הולך לעשות את זה איתו, אז התקשרתי להודיע לך "אל תבנה עלי אני לא בעניין של הטיול שלך".
והנמשל (שלא כל כך דומה אבל אני מצשטל אותו לכאן בסגנון רוסי כפי ששמעתיהו בביהמ"ד של יוצאי מוסקבה):
מישהו רוצה לפתור בעיה, (והוא לקוח שמוכן לשלם כסף עבור כך) הוא נכנס לחנות שלך ומבקש פתרון, זה אומר שהוא נמצא בבעיה, ואת הבעיה שלו הוא רוצה לפתור, כלומר יש לו בעיה, והוא מחפש פתרון, הפתרון, צריך להיות פתרון של הבעיה, כלומר של הבעיה שיש לו. ולא פתרון של בעיה אחרת שאין לו. אז אם מציעים לו פתרונות חלופיים, הפתרונות הללו אמורים להיות מסוגלים לפתור את אותה בעיה בדיוק, ולא בעיות אחרות. כמו"כ הוא לא מחפש שיעזרו לו להתעלם מהבעיה, ולומר "אין בעיה כזו" או "היא נדירה" ו"היא לא כל כך מצויה", או "לא כל כך נוראה". או "בוא נפתור בינתיים בעיות אחרות".
ככה מקובל עכ"פ בגלילות הקווקז, אבל מי אני שאתווכח אולי בישראל זה שונה. -
@zvizvi הנושא של האזנה גם לדבל קליק והתעלמות מההקלקה הראשונה נובע מתרחיש שבו מרימים דיאלוג, והוא נסגר בגלל הלחיצה השניה. הסברתי את זה בפתח דבריי.
זה גם לא נכון שאין לחיצות כפולות באינטרנט, כשאתה מדבר על אפליקציה כבדה אין לך הרבה לאן לברוח, כמות האירועים מוגבלת, ואתה שורף מהר מאוד את האופציות של לחיצה בודדת, כפולה, שמאלית, ימנית, אמצעית, אנטר, טאב ועוד היד נטויה. אלא אם כן יש לך מקום לארבע מאות כפתורים בכל ס"מ מסך.
נראה לי שאני צריך להרים פרוייקט קטן (אולי אעשה זאת בהמשך) כדי להמחיש מה קורה למישהו שמרים דיאלוג והוא נסגר לו בפנים, בגלל לחיצה כפולה. או שנפתחים 2 דיאלוגים אחד על גבי השני ואחד מעודכן והשני לא וכשהוא סוגר את הראשון השני עדיין צף, עם הנתונים הישנים. אלו בעיות שהעולם מתמודד איתם מאז מלחמת העולם השניה.ואסיים בסיפור, מישהו פירסם מודעה דרוש שותף לטיול קשוח ביותר ביערות הגשם מקום שלא דרכה שם כף רגל אדם מעולם, למיטיבי לכת ולאוהבי הרפתקאות בלבד. התקשר אליו מישהו
"בקשר למודעה על הטיול"
כן, בן כמה אתה? 96
עשית טיולים כאלו בעבר? לא
אתה אוהב לטייל באופן כללי? לא
אתה בכושר גופני? ממש לא, אני בקושי זז.
אז למה התקשרת? תראה ראיתי את המודעה שלך הבנתי שאתה מחפש פרטנר לטיול שלך, אמרתי לעצמי אני בוודאי לא הולך לעשות את זה איתו, אז התקשרתי להודיע לך "אל תבנה עלי אני לא בעניין של הטיול שלך".
והנמשל (שלא כל כך דומה אבל אני מצשטל אותו לכאן בסגנון רוסי כפי ששמעתיהו בביהמ"ד של יוצאי מוסקבה):
מישהו רוצה לפתור בעיה, (והוא לקוח שמוכן לשלם כסף עבור כך) הוא נכנס לחנות שלך ומבקש פתרון, זה אומר שהוא נמצא בבעיה, ואת הבעיה שלו הוא רוצה לפתור, כלומר יש לו בעיה, והוא מחפש פתרון, הפתרון, צריך להיות פתרון של הבעיה, כלומר של הבעיה שיש לו. ולא פתרון של בעיה אחרת שאין לו. אז אם מציעים לו פתרונות חלופיים, הפתרונות הללו אמורים להיות מסוגלים לפתור את אותה בעיה בדיוק, ולא בעיות אחרות. כמו"כ הוא לא מחפש שיעזרו לו להתעלם מהבעיה, ולומר "אין בעיה כזו" או "היא נדירה" ו"היא לא כל כך מצויה", או "לא כל כך נוראה". או "בוא נפתור בינתיים בעיות אחרות".
ככה מקובל עכ"פ בגלילות הקווקז, אבל מי אני שאתווכח אולי בישראל זה שונה. -
@ארכיטקט
מזמן אמרו זקני ציון
אנשים כמוך עוזרים למתכנתים לשרוד במקצוע.בקיצור, תבוא יותר, זה תמיד יהיה פתרון לבעיה שלנו.
-
כידוע חלק גדול מהסבל של האנושות (אחרי רעב מחלות ומלחמות) נובע מכך שיוזרים לוחצים פעמיים על כפתורים, כשצריך ללחוץ פעם אחת, והלחיצה הכפולה נספרת גם כ 2 לחיצות בודדות, ואז דברים מתחילים להתחרבש, שלא לדבר על שליחת API פעמיים לשרת, חיובים כפולים בכרטיסי אשראי, הזמנות כפולות, ושיגור של 2 פצצות אטום במקום אחת (אם מדובר למשל בדונלד טראמפ או משהו כזה).... אבל מילא פצצות אטום וכדומה, במקרה היותר גרוע מדובר בדיאלוג שנפתח באמצע המסך, ואז נסגר כי היוזר לחץ פעמיים על הכפתור שפותח את הדיאלוג, והלחיצה השניה בעצם סוגרת את הדיאלוג, כי זו לחיצה מחוץ לשטח הדיאלוג, כאן זה כבר הרבה יותר נורא מפצצת אטום, כי היוזר מתקשר אליך לנייד "דחוף דחוף" תודו.
מצד שני אתה לא יכול להכריח את כולם ללחוץ פעמיים כי חלק מהיוזרים מצפים ללחיצה בודדת, הרי מדובר בכפתור אחרי הכל...
אז הפתרון שלנו הוא דיירקטיב לאנגולר שמאפשר לך לשלוט ביד רמה על אירועי ההקלקה באופן הבא:אפשר להגדיר לחיצה בודדת בלבד והלחיצה השניה של ההקלקה הכפולה לא יורה אירוע בכלל (זו התנהגות ברירת המחדל)
אפשר להגדיר שהלחיצה הבודדת לא יורה בכלל כאשר ישנה לחיצה כפולה.
אפשר גם להגדיר את אותו אירוע ללחיצה בודדת או כפולה, כך שאם הוא לחץ לחיצה כפולה האירוע יירה בזכות הלחיצה הכפולה, והלחיצה הבודדת לא תשפיע בכלל.
לאחרונה הבעיה הזו גרמה לי הרבה תלונות UXיות, ולכן הפשלתי את השרוולים והכנסתי את הידיים לבוץ אחת ולתמיד.
נא לא להעלות את הקוד הזה לאינטרנט בשלב זה. לשימוש חברי הפורום בלבד.
תהנו.import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core'; @Directive({ selector: '[mtrSingleClick]' }) export class SingleClickDirective { private singleClickWasClickedRecently = false; private isdblClick = false; @Input() public debounceTime = 500; @Input() public ignoreSingleClickWhenDblClick = true; @Input('mtrSingleClickStopPropagation') public stopPropagation = false; @Output() singleClick = new EventEmitter<any>(); @Output() singleOrDblclick = new EventEmitter<any>(); @HostListener('click', ['$event']) onClick($event): void { if (this.stopPropagation) { $event.stopPropagation(); } if (this.singleClickWasClickedRecently) { return; } this.singleClickWasClickedRecently = true; if (this.ignoreSingleClickWhenDblClick) { // check if not dblclick const mainTimer = setTimeout(() => { if (this.isdblClick) { this.singleClickWasClickedRecently = false; clearTimeout(mainTimer); return; } // if is not dblclick this.emitSingleClick($event); clearTimeout(mainTimer); }, this.debounceTime); } else { this.emitSingleClick($event); } } emitSingleClick($event): void { this.singleClick.emit($event); this.singleOrDblclick.emit($event); const timer = setTimeout(() => { this.singleClickWasClickedRecently = false; clearTimeout(timer); }, this.debounceTime); } @HostListener('dblclick', ['$event']) onDblclick($event): void { if (this.stopPropagation) { $event.stopPropagation(); } this.isdblClick = true; const timer = setTimeout(() => { this.isdblClick = false; clearTimeout(timer); }, this.debounceTime); this.singleOrDblclick.emit($event); } constructor() { } }למימוש:
<div mtrSingleClick (singleOrDblclick)="openForm()" [mtrSingleClickStopPropagation]="true" > </div>@ארכיטקט אמר בבשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות:
במקרה היותר גרוע מדובר בדיאלוג שנפתח באמצע המסך, ואז נסגר כי היוזר לחץ פעמיים על הכפתור שפותח את הדיאלוג, והלחיצה השניה בעצם סוגרת את הדיאלוג, כי זו לחיצה מחוץ לשטח הדיאלוג, כאן זה כבר הרבה יותר נורא מפצצת אטום, כי היוזר מתקשר אליך לנייד "דחוף דחוף" תודו.
שאלת תם: אם כבר setTimeout לא עדיף להקפיא את הלחצן [disabled]="secondPassed" ? נראה לי יותר פשוט
וסתם כך, אצלנו בבוטסטראפ, דאבל קליק על לחצן שפותח דיאלוג לא סוגר אותו, כנראה גם בוטסטראפ חשב על הבעיה שהצגת.
