في عالم الويب، تُعد الصور جزءًا أساسيًا من المحتوى، وغالبًا ما يرغب أصحاب المواقع في حماية أعمالهم الفنية أو التصميمات الخاصة بهم من النسخ غير المصرح به. إحدى الطرق الشائعة للحماية هي تعطيل القائمة المنبثقة (Context Menu) التي تظهر عند النقر الأيمن على الصور.
ما هي القائمة المنبثقة (Context Menu)؟
هي القائمة التي تظهر عادةً عند النقر بزر الفأرة الأيمن على عنصر ما في صفحة الويب أو نظام التشغيل. بالنسبة للصور، تحتوي هذه القائمة غالبًا على خيارات مثل "حفظ الصورة باسم..." (Save Image As...), "نسخ الصورة" (Copy Image)، أو "فتح الصورة في علامة تبويب جديدة" (Open Image in New Tab)، مما يسهل على المستخدمين حفظ أو نسخ الصور.
لماذا نعطل النقر الأيمن على الصور؟
- حماية الملكية الفكرية: لمنع الزوار من حفظ الصور بسهولة واستخدامها دون إذن.
- الحفاظ على التصميم: لضمان أن تبقى الصور جزءًا لا يتجزأ من تصميم الموقع ولا يتم فصلها عنه.
- تجربة مستخدم محددة: في بعض الحالات، قد يرغب المطور في توجيه المستخدمين لاستخدام وظائف معينة في الموقع بدلاً من خيارات المتصفح الافتراضية.
كيف يعمل هذا السلوك باستخدام JavaScript؟
يعتمد الكود المقدم على JavaScript للتفاعل مع عناصر HTML في صفحة الويب. دعنا نحلل الأجزاء الرئيسية:
document.querySelectorAll('img').forEach(img => {
img.addEventListener('contextmenu', e => e.preventDefault());
});document.querySelectorAll('img'): هذه الدالة تبحث في مستند HTML بالكامل عن جميع العناصر التي تحمل وسم<img>(الصور). وتُعيد "قائمة عقد" (NodeList) تحتوي على كل هذه الصور..forEach(img => { ... }): هي طريقة تُستخدم للتكرار على كل عنصر في قائمة العقد التي تم الحصول عليها. لكل صورة (img) في القائمة، يتم تنفيذ الكود داخل الأقواس المتعرجة.img.addEventListener('contextmenu', e => e.preventDefault()): هذا هو الجزء الأساسي.addEventListener(): هي دالة تُستخدم لإضافة مستمع حدث (Event Listener) إلى عنصر معين. المستمع ينتظر حدوث حدث معين على هذا العنصر.'contextmenu': هذا هو نوع الحدث الذي ننتظره. يُطلق هذا الحدث عندما يحاول المستخدم فتح القائمة المنبثقة (عادةً بالنقر الأيمن).e => e.preventDefault(): هذه هي وظيفة معالج الحدث (Event Handler).e: هو كائن الحدث (Event Object) الذي يحتوي على معلومات حول الحدث الذي وقع.e.preventDefault(): هذه الدالة مهمة جدًا. وظيفتها هي منع السلوك الافتراضي للمتصفح المرتبط بهذا الحدث. في حالة حدث'contextmenu'، السلوك الافتراضي هو إظهار القائمة المنبثقة. عند استدعاءe.preventDefault()، يتم إلغاء هذا السلوك، وبالتالي لا تظهر القائمة.
بهذه الطريقة، يتم تطبيق منع النقر الأيمن على جميع الصور في الصفحة بشكل انتقائي، مع السماح بالنقر الأيمن في الأجزاء الأخرى من الموقع.
🔗 الخطوة التالية: انتقل إلى التطبيق العملي وجرب الكود بنفسك من هنا.