event.preventDefault() مقابل return false: كيف لا تفسد JavaScript الخاص بك

مقدمة: لماذا هذا الموضوع يفجر Stack Overflow؟

إذا كنت قد كتبت يومًا معالج نقر لرابط أو إرسال نموذج في JavaScript، فمن المحتمل أنك واجهت موقفًا حيث يقوم المتصفح بشيء بنفسه، متجاهلاً منطقك. تكتب alert('مرحبًا!') عند النقر على رابط، لكن المتصفح بدلاً من ذلك يصر على الانتقال إلى صفحة أخرى. مألوف؟

هنا بالضبط يظهر على المسرح طريقتان أسطوريتان: event.preventDefault() و return false. سؤال "ماذا تختار؟" هو واحد من أكثر الأسئلة شيوعًا على Stack Overflow بعشرات الآلاف من المشاهدات. وليس من دون سبب: الفرق بينهما جوهري، والاختيار الخاطئ يمكن أن يؤدي إلى أخطاء يصعب اكتشافها.

في هذه المقالة، سنفهم مرة واحدة وإلى الأبد:

\n
• ما هو "الإجراء الافتراضي" في المتصفح
\n
• كيف تعمل كلتا الطريقتين
\n
• الفرق الرئيسي الذي كسر كود آلاف المطورين
\n
• متى تستخدم كل منهما
\n
• لماذا return false ليس دائمًا شرًا
\n

هل أنت مستعد؟ لننطلق!

1. ما هو "الإجراء الافتراضي"؟

قبل أن نتحدث عن الطرق، دعنا نفهم ما نلغيه بالضبط. المتصفح هو آلة ذكية بسلوك مدمج للعديد من عناصر HTML:

\n
• الرابط (<a>): بشكل افتراضي ينتقل إلى العنوان الموجود في الخاصية href.
\n
• النموذج (<form>): بشكل افتراضي يرسل البيانات إلى الخادم ويعيد تحميل الصفحة.
\n
• زر الإرسال (<input type="submit">): يرسل النموذج.
\n
• القائمة السياقية (النقر بالزر الأيمن): يعرض قائمة المتصفح.
\n

أحيانًا نحتاج هذا السلوك - مثلاً عندما يريد المستخدم بالفعل الانتقال عبر الرابط. لكن غالبًا ما نريد اعتراض هذا الإجراء وتنفيذ منطقنا الخاص: التحقق من النموذج قبل الإرسال، فتح الرابط في نافذة منبثقة، إظهار قائمة سياقية مخصصة.

لهذا بالضبط نحتاج أبطالنا.

2. event.preventDefault() - الطريقة الأنيقة

هذه طريقة من كائن الحدث (event). تقوم بشيء واحد فقط: إلغاء الإجراء الافتراضي للمتصفح.

// مثال 1: إلغاء الانتقال عبر الرابط\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('الرابط لم يعمل! لقد ألغيتُه.');\n});\n\n// مثال 2: إلغاء إرسال النموذج\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // الآن النموذج لن يعيد تحميل الصفحة\n    // يمكن عمل طلب AJAX أو التحقق من الصحة\n    console.log('النموذج لم يُرسل. نتحقق من البيانات...');\n});\n

لاحظ: preventDefault() لا يوقف انتشار الحدث. إذا كان لديك معالجات متداخلة، سيستمر الحدث في "الانتشار" لأعلى شجرة DOM.

من المهم فهم هذا: إذا كنت تريد إلغاء الإجراء وإيقاف الانتشار معًا، عليك استدعاء كلا الطريقتين: preventDefault() و stopPropagation().

3. return false - صديق قديم لكنه خطير

أما return false فهو وحش أكثر تعقيدًا. كل شيء يعتمد على كيفية إضافة المعالج.

الحالة 1: خصائص HTML (onclick)

في الأزمنة القديمة (وحتى الآن في الكود القديم) كانت المعالجات تُضاف مباشرة في HTML:

<a href="https://example.com" onclick="return false;">اضغط علي</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="إرسال">\n</form>\n\n<script>\nfunction validateForm() {\n    // إذا أرجع false - لن يُرسل النموذج\n    // إذا أرجع true - سيُرسل\n    return false;\n}\n</script>\n

في