محاكاة تمرير الماوس في JavaScript: توضيح التناقضات وتنفيذ التحكم اليدوي

أثناء محاولتك محاكاة أحداث تمرير الماوس في Chrome، ربما واجهت مشكلة مثيرة للاهتمام مشكلة. على الرغم من أنه تم تنشيط مستمع حدث "تمرير الماوس" بنجاح، إلا أن إعلان "تحويم" CSS المقابل لا يسري مفعوله. بالإضافة إلى ذلك، فإن محاولات تعديل قائمة فئات العنصر باستخدام classList.add("hover") داخل مستمع تمرير الماوس تفشل أيضًا في تشغيل تغييرات CSS المطلوبة.

يكمن المفتاح في فهم التمييز بين الأحداث الموثوقة وغير الموثوقة. وفقًا لبروتوكول الأمان الخاص بالمتصفح، تعتبر بعض الأحداث التي تنشأ من تفاعل المستخدم أو تعديلات DOM موثوقة، بينما يتم تصنيف الأحداث التي تبدأ بواسطة JavaScript على أنها غير موثوقة. تندرج أحداث التمرير ضمن الفئة الأخيرة.

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

ولذلك، لتحقيق تأثير التمرير المطلوب باستخدام JavaScript، يلزم اتباع نهج بديل. بدلاً من الاعتماد على حدث التمرير الأصلي، يمكنك إضافة فئة مخصصة وإزالتها يدويًا (على سبيل المثال، "hover") عند حدوث حدثي تمرير الماوس وإخراج الماوس. سيمكنك هذا من التحكم في تغييرات CSS المرتبطة بحالة "التمرير" بنفسك.