تنفيذ دالة النقر قبل فقدان التركيز في Angular

تواجه العديد من التطبيقات المشكلة نفسها التي تواجهك، حيث تحتاج إلى تنفيذ دالة النقر قبل دالة فقدان التركيز على عنصر ما. في حالتك، تقوم بتنفيذ دالة تبديل القائمة المنسدلة عندما يكون حقل الإدخال محددًا، وعندما لا يكون محددًا بعد ذلك، يجب إغلاق القائمة المنسدلة. ومع ذلك، تحدث المشكلة عندما يتم النقر فعليًا على عنصر داخل القائمة المنسدلة؛ حيث تنفذ دالة فقدان التركيز (blur) قبل أن تنفذ دالة النقر (click)، مما يؤدي إلى إغلاق القائمة المنسدلة قبل تنفيذ العملية المطلوبة عند النقر.

لحل هذه المشكلة، يمكنك استخدام متغير مؤقت لتحديد ما إذا كان النقر على عنصر في القائمة المنسدلة يعتبر نقرًا داخليًا أم لا، ومن ثم تأجيل دالة فقدان التركيز (blur) إذا كان النقر يعتبر داخليًا. يمكنك تطبيق هذا الحل من خلال استخدام تقنية مثل تأخير مفقود التركيز (debounce) أو استخدام متغير لتعقب ما إذا كان النقر داخليًا أم لا.

في مثالك، يمكنك تطبيق هذا الحل على النحو التالي:

htmlCopy code
<input (focus)="showDropdown()" (blur)="onInputBlur()" #inputRef>
<ul (click)="onDropdownClick()">
  <li *ngFor="let item of dropdown">{{item.label}}li>
ul>

typescriptCopy code
export class YourComponent {
  dropdownVisible: boolean = false;
  internalClick: boolean = false;

  showDropdown() {
    this.dropdownVisible = true;
  }

  onInputBlur() {
    // تأخير دالة فقدان التركيز إذا كان النقر داخليًا
    if (!this.internalClick) {
      this.dropdownVisible = false;
    }
  }

  onDropdownClick() {
    // تحديد النقر كنقر داخلي
    this.internalClick = true;
    setTimeout(() => {
      this.internalClick = false;
    }, 0);
  }
}

في هذا الحل، نستخدم متغير internalClick لتعقب ما إذا كان النقر داخليًا أم لا. عند النقر على عنصر في القائمة المنسدلة، نعيد تعيين هذا المتغير لـ true لفترة قصيرة بمساعدة setTimeout ، مما يمنع تنفيذ دالة فقدان التركيز إذا كان النقر داخليًا. هذا الحل يتيح للنقر تنفيذ دالة النقر أولاً قبل تنفيذ دالة فقدان التركيز، مما يحل المشكلة التي واجهتها.

بالطبع، دعني أكمل المقال بمزيد من التفاصيل والشروحات.

المقال:

كيفية تنفيذ دالة النقر قبل دالة فقدان التركيز في الواجهة الأمامية

يواجه العديد من مُطوِّري واجهات الويب والتطبيقات مشكلة تنفيذ دالة النقر (click) قبل دالة فقدان التركيز (blur)، وذلك في حالات معينة مثل القوائم المنسدلة. في هذا المقال، سنناقش كيفية التغلب على هذه المشكلة باستخدام Angular كمثال، ولكن يمكن تطبيق المبدأ العام على أي إطار عمل أمامي آخر.

المشكلة

لنفترض أن لدينا حقل إدخال (input) يفتح قائمة منسدلة (dropdown) عند الفوكس (focus) عليه، ويُغلق القائمة عندما يفقد الحقل التركيز. ومع ذلك، يواجه المستخدمون مشكلة عندما يحاولون النقر فعلًا على عنصر داخل القائمة المنسدلة؛ حيث تُغلق القائمة بشكل غير متوقع قبل تنفيذ العملية المطلوبة.

الحل

لحل هذه المشكلة، يمكننا استخدام متغير مؤقت لتحديد ما إذا كان النقر داخليًا أم لا، ومن ثم تأجيل دالة فقدان التركيز (blur) إذا كان النقر داخليًا. في Angular، يمكننا تطبيق هذا الحل على النحو التالي:

التنفيذ بالتفصيل

1. قم بإنشاء متغير لتعقب ما إذا كان النقر داخليًا أم لا.

2. عند النقر على عنصر في القائمة المنسدلة، ضع قيمة المتغير السابقة على true لفترة قصيرة.

3. قم بتأجيل دالة فقدان التركيز (blur) إذا كان النقر داخليًا، لتمكين تنفيذ دالة النقر أولاً.

مثال تطبيقي باستخدام Angular

htmlCopy code
<input (focus)="showDropdown()" (blur)="onInputBlur()" #inputRef>
<ul (click)="onDropdownClick()">
  <li *ngFor="let item of dropdown">{{item.label}}li>
ul>

typescriptCopy code
export class YourComponent {
  dropdownVisible: boolean = false;
  internalClick: boolean = false;

  showDropdown() {
    this.dropdownVisible = true;
  }

  onInputBlur() {
    // تأخير دالة فقدان التركيز إذا كان النقر داخليًا
    if (!this.internalClick) {
      this.dropdownVisible = false;
    }
  }

  onDropdownClick() {
    // تحديد النقر كنقر داخلي
    this.internalClick = true;
    setTimeout(() => {
      this.internalClick = false;
    }, 0);
  }
}

الاستنتاج

باستخدام هذا النهج، يمكنك الآن ضمان تنفيذ دالة النقر قبل دالة فقدان التركيز، مما يساعد في تحسين تجربة المستخدم وتجنب المشاكل الناتجة عن ترتيب تنفيذ الأحداث في الواجهة الأمامية.

هذا هو المقال الذي يشرح كيفية تنفيذ دالة النقر قبل دالة فقدان التركيز في الواجهة الأمامية باستخدام Angular كمثال. آمل أن يكون هذا مفيدًا ومفهومًا.