مقالة مقدمة من wulin.com (www.vevb.com): كيف يستخدم HTML5 أحداث عجلة الماوس؟
يمكن أن تسمح إضافة أحداث عجلة الماوس إلى صفحات الويب HTML5 للمستخدمين بشكل أفضل بالتفاعل مع صفحات الويب. في HTML5 ، لا يمكن لعجلة تمرير الماوس أن تنزلق لأعلى ولأسفل فقط في صفحة الويب. في الواقع ، يمكنك أيضًا الاعتماد على هذا لإكمال المزيد من الوظائف ، مثل توسيع وتقليل مجال طائرة العرض.
تدعم معظم المتصفحات أحداث عجلة الماوس ، بحيث يمكنك الاشتراك في طريقة حدث عجلة الماوس أولاً. كلما تم تشغيل الحدث ، يمكنك الحصول على خاصية تسمى Wheeldelta ، والتي تمثل حجم عجلة الماوس التي تغيرت للتو. تشير القيمة الإيجابية إلى أن عجلة التمرير تنزلق إلى أسفل ، وتشير القيمة السالبة إلى أن عجلة التمرير تنزلق. كلما زادت القيمة المطلقة للقيمة ، زاد نطاق الانزلاق.
لسوء الحظ ، لا يزال هناك متصفح لا يدعم أحداث عجلة الماوس. هذا هو Firefox. قامت Mozilla بتنفيذ معالجة حدث يسمى DommesCroll ، والذي سيمرر معلمة حدث تسمى الحدث مع خاصية تسمى التفاصيل. ومع ذلك ، تختلف خاصية التفاصيل هذه عن Wheeldelta ، والتي يمكن أن تُرجع فقط قيمًا إيجابية ، أي أنه يمكن أن يصر فقط على قيمة تمرير عجلة الماوس لأسفل.
يجب أن تولي اهتمامًا خاصًا بأن Apple تم تعطيل التمرير للماوس للتحكم في الصفحة التي تنزلق لأعلى ولأسفل في متصفح Safari ، ولكن هذه الوظيفة لا تزال تستخدم بشكل طبيعي في محرك WebKit ، وبالتالي فإن الكود الذي تكتبه لن يؤدي إلى أي مشاكل.
أضف طريقة معالجة أحداث عجلة الماوس
أولاً ، نضيف صورة إلى صفحة الويب ، ويمكننا استخدام عجلة الماوس للتحكم في تكبير هذه الصورة لاحقًا.
<img id = myimage src = myimage.jpg alt = صورتي />
أضف الآن رمز معالجة أحداث الماوس
var myimage = document.getElementById (myimage) ؛
if (myimage.addeventListener) {
// IE9 ، Chrome ، Safari ، Opera
myimage.addeventListener (mousewheel ، mousewheelhandler ، false) ؛
// Firefox
myimage.addeventListener (dommescroll ، mousewheelhandler ، false) ؛
}
// أي 6/7/8
آخر myimage.attachevent (onmousewheel ، mousewheelhandler) ؛
ممارسات المعالجة التي يمكن أن تدعمها متصفحات مختلفة
في الحالة التالية ، سنعكس القيمة التفصيلية لـ Firefox وإرجاع واحدة من 1 أو -1
وظيفة mousewhelehandler (e) {
// دلتا عجلة المتصفح
var e = window.event || ه ؛ // دعم IE القديم
var delta = math.max (-1 ، math.min (1 ، (e.wheeldelta || -e.detail))) ؛
الآن نقرر مباشرة نطاق حجم الصورة. يعين الكود التالي نطاق عرض الصورة بين 50-800 بكسل
myimage.style.width = Math.Max (50 ، Math.min (800 ، myimage.width + (30 * Delta))) + px ؛
العودة كاذبة
}
النقطة الأخيرة ، نعيد خطأ في طريقة إنهاء معالجة الأحداث القياسية لعجلة الماوس في حالة انزلق صفحة الويب لأعلى ولأسفل.