AR
RU
EN
ES
ZH
FR
DE
PT
HI
# أو javascript:void(0): أيهما تختار لروابط JavaScript؟ شرح كامل مع كود
\n\nمرحبًا، زميلي المطور! إذا سبق لك كتابة روابط لا تؤدي إلى صفحة جديدة، بل تشغل كود JavaScript (مثل فتح نافذة منبثقة، تحميل محتوى، أو تنفيذ حركة)، فبالتأكيد واجهت المعضلة: ما قيمة السمة href التي يجب استخدامها؟ href="#" أم href="javascript:void(0)"؟
هذا السؤال هو موضوع شائع جدًا على Stack Overflow (آلاف المشاهدات!)، وليس بدون سبب. قد يبدو الأمر بسيطًا، لكنه يؤثر على سلوك الصفحة: هل سيتم التمرير لأعلى؟ هل سيظهر رمز (#) في عنوان URL؟ هل سيعمل في المتصفحات القديمة؟ دعنا نفهم مرة واحدة وإلى الأبد أي نهج أفضل، ولماذا الإجابة "الصحيحة" ليست واضحة تمامًا.
\n\nالمشكلة: لماذا نغير href أساسًا؟
\n\nتخيل: أنت تكتب زرًا يفتح قائمة:
\n\n<a href="#" onclick="openMenu(); return false;">القائمة</a>أو هكذا:
\n\n<a href="javascript:void(0)" onclick="openMenu();">القائمة</a>كلا الخيارين "يعملان"، لكن كل منهما يحمل مفاجآت. دعنا نقارنهما وفقًا لمعايير رئيسية.
\n\nالخيار 1: href="#" — الكلاسيكي مع المأزق
\n\n# هو رابط إلى "أعلى" الصفحة. إذا كتبت ببساطة <a href="#">، سيقوم المتصفح بالتمرير لأعلى الصفحة. لتجنب ذلك، يجب إضافة return false; في المعالج:
<a href="#" onclick="doSomething(); return false;">اضغط علي</a>الإيجابيات:
\n- \n
- إمكانية الوصول: يظل الرابط قابلاً للتركيز (يمكن التنقل إليه عبر Tab). \n
- الدلالات: بالنسبة لقارئات الشاشة، لا يزال رابطًا (وإن كان لا يؤدي إلى أي مكان). \n
- البساطة: سهل التذكر، كتابته سريعة. \n
السلبيات:
\n- \n
- التمرير لأعلى: إذا نسيت
return false، سيفقد المستخدم موقعه. \n - تغيير URL: يضاف
#إلى شريط العنوان (أحيانًا يكون غير مرغوب فيه). \n - سجل المتصفح: يتم إنشاء إدخال في السجل (زر "الرجوع" سينتقل إلى صفحة "#" السابقة). \n
الخيار 2: href="javascript:void(0)" — اختراق للأزمنة القديمة
\n\njavascript:void(0) هو بروتوكول زائف لـ JavaScript. يخبر المتصفح: "نفذ الكود void(0) ولا تنتقل عبر الرابط". void(0) يُرجع undefined، لذلك لا تتحرك الصفحة.
<a href="javascript:void(0)" onclick="doSomething();">اضغط علي</a>الإيجابيات:
\n- \n
- لا يقوم بتمرير الصفحة — لا حاجة لأي
return false. \n - لا يغير URL — لا تتم إضافة رمز (#). \n
السلبيات:
\n- \n
- مشاكل في إمكانية الوصول: بعض قارئات الشاشة القديمة قد تتعثر بسبب
javascript:في href. - انتهاك مبادئ التحسين التدريجي: إذا كان JavaScript معطلاً لدى المستخدم، الرابط لا يعمل (يؤدي إلى الفراغ).
- HTML غير صالح؟ رسميًا،
javascript:هو بروتوكول غير قياسي، لكن المتصفحات تفهمه. ومع ذلك، قد يعترض مدقق W3C. - تصحيح الأخطاء أصعب: إذا كان هناك خطأ في href، قد يتصرف المتصفح بشكل غير متوقع.
مقارنة في جدول
\n\n| المعيار | \nhref="#"
|
|---|
