JavaScript는 마우스 휠 이벤트 비활성화를 구현합니다.

이 글은 자바스크립트에서 마우스 휠 이벤트를 비활성화하는 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

일반적으로 호환되는 부분에 대해서는 하위 버전의 IE의 호환성을 조정하지만, 이번에는 하위 버전의 브라우저가 무능해서가 아닙니다. Firefox가 너무 멀리 나아갔고 다른 브라우저의 경험을 완전히 무시했기 때문입니다. Firefox를 제외한 모든 브라우저는 MouseWheel 이벤트를 사용하여 마우스 휠의 응답을 처리할 수 있습니다. 그러나 Firefox는 MouseWheel을 지원하지 않으며 Firefox를 제외한 다른 브라우저와 호환되지 않는 무의미한 DOMMouseScroll을 사용합니다. 즉, 마우스 휠 이벤트를 처리하기 위해 Firefox는 DOMMouseScroll만 사용할 수 있습니다. Firefox 이외의 제품에서는 MouseWheel만 사용할 수 있습니다. 이 두 이벤트의 원리는 다르며 처리하는 데이터도 다릅니다.

1. varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
2. firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
3. (img.onmousewheel=마우스휠);
5. functionMouseWheel(e){
6. e=e||window.event;
8. if(e.stopPropagation)e.stopPropagation();
9. elsee.cancelBubble=true;
11. if(e.preventDefault)e.preventDefault();
12. elsee.returnValue=false;
14. }

전체 코드를 살펴보겠습니다.

1. <!DOCTYPEhtml>
2. <스타일>
3. 범위{글꼴:14px/20pxMicrosoft Yahei;}
4. #계수기{
5. 너비:50px;높이:20px;
6. 테두리:1pxsolid#CCC;
7. 배경:#F9F9F9;
8. 글꼴:14px/20pxConsolas;
9. 텍스트 정렬:가운데;
10. 여백:10px;
11. }
12. </style>
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(counter);
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. e.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. e.preventDefault();
48. },거짓);
49. </script>

이상이 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.