Главная страница>Учебник по сетевому программированию>Учебное пособие по ASP

JavaScript реализует отключение событий колеса мыши

Автор：Eve Cole Время обновления：2025-01-13 10:24:01

В этой статье в основном представлена ​​соответствующая информация об отключении событий колесика мыши в JavaScript. Друзья, нуждающиеся в этом, могут обратиться к ней.

Обычно мы корректируем совместимость более ранних версий IE, когда дело касается совместимости, но на этот раз это не потому, что более ранняя версия браузера некомпетентна. Все потому, что Firefox зашел слишком далеко и полностью игнорирует опыт других браузеров. Все браузеры, кроме Firefox, могут использовать событие MouseWheel для обработки реакции колеса мыши. Однако Firefox не поддерживает MouseWheel и использует бессмысленный DOMMouseScroll, который несовместим с другими браузерами, кроме Firefox. Другими словами, для обработки событий колеса мыши Firefox может использовать только DOMMouseScroll. Не-Firefox может использовать только MouseWheel. Принципы этих двух событий разные, и данные, которые они обрабатывают, тоже разные.

  1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
  2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
  3. (img.onmousewheel=MouseWheel);
  5. functionMouseWheel(e){
  6. е=е||окно.событие;
  8. если (e.stopPropagation) e.stopPropagation();
  9. elsee.cancelBubble=истина;
  11. если(e.preventDefault)e.preventDefault();
  12. elsee.returnValue = ложь;
  14. }

Давайте посмотрим на полный код

  1. <!DOCTYPEhtml>
  2. <стиль>
  3. span{font:14px/20pxMicrosoft Yahei;}
  4. #прилавок{
  5. ширина: 50 пикселей; высота: 20 пикселей;
  6. граница: 1pxsolid#CCC;
  7. фон: # F9F9F9;
  8. шрифт: 14 пикселей/20 пикселейConsolas;
  9. выравнивание текста: по центру;
  10. поле: 10 пикселей;
  11. }
  12. </стиль>
  13. <span>Используйте колесо мыши, чтобы отрегулировать значение</span><br/>
  14. <divid=counter>0</div>
  15. <скрипт>
  16. //Оцениваем браузер
  17. varisIE=navigator.userAgent.match(/MSIE(/d)/i);
  18. isIE=isIE?isIE[1]:не определено;
  19. varisFF=/FireFox/i.test(navigator.userAgent);
  20. //Получаем элементы
  21. varcounter=document.getElementById(счетчик);
  22. //Событие колеса мыши
  23. if(isIE<9)//Традиционные браузеры используют событие MouseWheel
  24. counter.attachEvent(onmousewheel,function(){
  25. //Рассчитываем расстояние, на которое прокручивается колесо мыши
  26. //Одна сетка состоит из 3 строк, каждая строка имеет 40 пикселей, поэтому делим на 120
  27. varv=event.wheelDelta/120;
  28. counter.innerHTML=counter.innerHTML*1+v;
  29. //Блокируем метод браузера по умолчанию
  30. возвратложь;
  31. });
  32. elseif(!isFF)//Современные браузеры, кроме Firefox, также используют событие MouseWheel
  33. counter.addEventListener(mousewheel,function(e){
  34. //Рассчитываем расстояние, на которое прокручивается колесо мыши
  35. varv=e.wheelDelta/120;
  36. counter.innerHTML=counter.innerHTML*1+v;
  37. //Блокируем метод браузера по умолчанию
  38. е.preventDefault();
  39. },ЛОЖЬ);
  40. else//Странный Firefox использует событие DOMMouseScroll
  41. counter.addEventListener(DOMMouseScroll,function(e){
  42. //Рассчитываем расстояние, на которое прокручивается колесо мыши
  43. //Одна сетка состоит из 3 строк, но обратите внимание, что отличие здесь от пикселей в том, что это отрицательное значение
  44. varv=-e.detail/3;
  45. counter.innerHTML=counter.innerHTML*1+v;
  46. //Блокируем метод браузера по умолчанию
  47. е.preventDefault();
  48. },ЛОЖЬ);
  49. </скрипт>

Выше приведено все содержание этой статьи, надеюсь, она вам всем понравится.

Связанные статьи