בשורה מרעישה לכל מי שסובל מבעיות UX הנובעות מבלבול בין לחיצות כפולות לבודדות
-
@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" ? נראה לי יותר פשוט
וסתם כך, אצלנו בבוטסטראפ, דאבל קליק על לחצן שפותח דיאלוג לא סוגר אותו, כנראה גם בוטסטראפ חשב על הבעיה שהצגת.
