خاصية Pointer Events
آخر تحديث: 2026-09-13
pointer-events خاصية Pointer Events
تتحكم خاصية pointer-events فيما إذا كان العنصر يمكن أن يصبح هدفًا لأحداث المؤشر مثل النقر والتحويم. عند ضبطها على none، يتجاهل العنصر أحداث المؤشر تمامًا وتمر إلى العناصر الموجودة أسفله. وهي أداة شائعة للنقر الاختراقي وتعطيل التفاعل والتفاعلات المعقدة لواجهة المستخدم المتعددة الطبقات.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
pointer-events: auto | none;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | none | كلمة مفتاحية | ما إذا كان العنصر يستجيب لأحداث المؤشر |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| pointer-events | ✓ v1 | ✓ v12 | ✓ v1.5 | ✓ v4 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： يجعل pointer-events: none العنصر وكل عناصره الفرعية يتجاهلون أحداث المؤشر. لكي يستجيب أحد الفروع مجددًا، يجب ضبط pointer-events: auto على ذلك الفرع صراحةً.
تحذير： لا يؤثر pointer-events: none على أحداث لوحة المفاتيح أو التركيز. لا يزال يمكن تركيز العنصر عبر مفتاح Tab؛ ادمجه مع tabindex="-1" لتعطيله تمامًا.
❓ الأسئلة الشائعة
Qما الفرق بين pointer-events: none و disabled؟
Adisabled سمة HTML: إلى جانب منع التفاعل، تغيّر النمط الافتراضي للعنصر وتمنع إرسال النموذج وتكبت أحداث النقر. أما pointer-events: none فلا يجعل العنصر إلا يتجاهل أحداث المؤشر — يبقى مظهره كما هو، ولا يزال يمكن تركيزه عبر لوحة المفاتيح، ولا يزال يُرسَل مع النموذج. لتعطيل عنصر تحكم في النموذج بالكامل، تفضل disabled.
Qهل تمنع قيمة pointer-events: none أحداث اللمس على الهاتف المحمول؟
Aنعم. يتعامل pointer-events: none مع كل أجهزة إدخال المؤشر بالتساوي، بما في ذلك الماوس والقلم والشاشة التي تعمل باللمس. بمجرد ضبطه، لا يصبح العنصر أبدًا هدفًا لحدث مؤشر — فالنقرات واللمسات والتحويمات تمر جميعها إلى الطبقة السفلية. لا يؤثر على أحداث لوحة المفاتيح مع ذلك: لا يزال يمكن تركيز العنصر عبر Tab، لذا أضف tabindex="-1" لحظر ذلك أيضًا.
Qما الفرق بين pointer-events: none و visibility: hidden؟
Aيجعل visibility: hidden العنصر غير مرئي وغير تفاعلي تمامًا، لكنه لا يزال يشغل مساحة في التخطيط، ويمكن إظهار العناصر الفرعية مجددًا عبر visibility: visible. أما العنصر ذو pointer-events: none فيبقى مرئيًا وقابلًا للتحديد والتركيز — ببساطة يتجاهل أحداث المؤشر التي تمر بعد ذلك إلى العناصر الموجودة أسفله. استخدم الأول للإخفاء والثاني للسماح بمرور الأحداث.
Qكيف أجعل النقرات تمر عبر طبقة التراكب لتصل إلى العنصر الموجود أسفلها؟
Aاضبط pointer-events: none على طبقة التراكب العلوية، فتمر أحداث المؤشر من خلالها إلى العنصر الموجود أسفلها. الحالات النمطية: طبقات تراكب زخرفية بحتة مثل حجاب شبه شفاف يُضاف عبر ::before، وطبقات التعليقات التوضيحية على الخرائط والتلميحات (tooltips) المخصصة. إذا كانت طبقة التراكب تحتوي على أزرار يجب أن تكون قابلة للنقر، استعد pointer-events: auto على تلك الأزرار بشكل فردي.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
