في هذه المقالة ، سوف نتعلم كيفية تعطيل حدث النقر باستخدام CSS.

دعنا نبدأ!

كيفية تعطيل حدث النقر باستخدام CSS؟

يمكنك تعطيل أحداث النقر باستخدام CSS ' مؤشر الأحداث ' منشأه. لكن عند القفز إليها ، سنشرحها لك بإيجاز.

ما هي خاصية CSS 'أحداث المؤشر'؟

ال ' مؤشر الأحداث 'يتحكم في كيفية استجابة عناصر HTML أو سلوكها لحدث اللمس ، مثل النقر أو النقر فوق الأحداث ، والحالات النشطة أو حالات التمرير ، وما إذا كان المؤشر مرئيًا أم لا.

بناء الجملة
بناء جملة أحداث المؤشر كما يلي:

تأخذ خاصية الإشارة أعلاه قيمتين ، مثل ' تلقاءي ' و ' لا أحد ':

• تلقاءي: يتم استخدامه لأداء الأحداث الافتراضية.
• لا أحد: يتم استخدامه لتعطيل الأحداث.

ملاحظة: سيوضح المثال أدناه أولاً كيفية إضافة زرين نشطين ، ثم سنقوم بتعطيل حدث النقر للزر الثاني.

مثال 1: تعطيل حدث النقر للأزرار باستخدام CSS
في هذا المثال ، سننشئ عنوانًا

وزرين. بعد ذلك ، حدد ' زر 'كاسم فئة الزر الأول ، وقم بتعيين' زر ' و ' زر 2 'كفئات الزر الثاني.

لغة البرمجة

< شعبة >
< h1 > تعطيل Click Event Using CSS < / h1 >
< زر صف دراسي = 'زر' > تمكين زر < / زر >
< زر صف دراسي = 'زر button2' > زر تعطيل < / زر >
< / شعبة >

في CSS ، ' .زر 'للوصول إلى كلا الزرين اللذين تم إنشاؤهما في ملف HTML. بعد ذلك ، قم بتعيين نمط الحدود على أنه ' لا أحد 'وإعطاء المساحة المتروكة كـ' 25px '. بعد ذلك ، اضبط لون نص الزر على أنه ' RGB (29 ، 6 ، 31) 'وخلفية الزر باسم' RGB (19 ، 192 ، 163) '. سنقوم أيضًا بتعيين نصف قطر الزر على أنه ' 5 بكسل '.

CSS

.زر {
الحدود : لا أحد ؛
حشوة : 25px ؛
اللون : RGB ( 29 و 6 و 31 ) ؛
لون الخلفية : RGB ( 19 و 192 و 163 ) ؛
نصف قطر الحد : 5 بكسل ؛
}

بعد ذلك ، سنطبق الفئة الزائفة النشطة على كلا الزرين باسم ' .button: نشط 'وتعيين لون الزر على أنه' RGB (200 ، 255 ، 0) ':

.زر : نشيط {
لون الخلفية : RGB ( 209 و 65 و 65 ) ؛
}

نتيجة لذلك ، سترى النتيجة التالية:

الآن ، سننتقل إلى الجزء التالي الذي سنقوم فيه بتعطيل حدث النقر للزر الثاني.

للقيام بذلك ، استخدم ' .button2 'للوصول إلى الزر الثاني ، الذي تم إنشاؤه في ملف HTML ، وبعد ذلك ، قم بتعيين قيمة الخاصية pointer-events على أنها' لا أحد ':

.button2 {
مؤشر الأحداث : لا أحد ؛
}

سيؤدي استخدام الخاصية pointer-events وتعيين قيمته إلى non إلى تعطيل حدث النقر ، والذي يمكن رؤيته في الإخراج التالي:

لقد قدمنا ​​أسهل طريقة لتعطيل حدث النقر باستخدام CSS.

استنتاج

لتعطيل حدث النقر في HTML ، فإن ' مؤشر الأحداث 'من CSS. لهذا الغرض ، أضف عنصر HTML وعيّن قيمة خاصية أحداث المؤشر على أنها ' لا أحد ”لتعطيل حدث النقر الخاص به. توضح هذه المقالة كيفية تعطيل حدث النقر باستخدام CSS مع مثاله.