Mousewheel events_javascript 기술에 대한 간략한 토론

실제로 대부분의 브라우저(IE6, IE7, IE8, Opera 10, Safari 5)는 "마우스휠" 이벤트를 제공합니다. 불행하게도 Firefox 3.5는 이 이벤트를 지원하지 않습니다. 다행스럽게도 Firefox 3.5는 "DOMMouseScroll"(이벤트 및 이벤트 속성에 대한 테스트 사례)이라는 또 다른 동등한 이벤트를 제공합니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JavaScript의 마우스휠 이벤트</title> <style> body { padding:5px 10px; } .box { width:300px; height:150px; padding:10px; border:1px solid #999; background:#999; margin-bottom:20px; } .result strong { color:#f00; } </style> <h1>JavaScript의 마우스휠 이벤트</h1> <ol> <li>IE6, IE7, IE8, Opera 10, Safari 5에서 마우스휠을 지원합니다.</li> <li>Firefox 3.5는 DOMMouseScroll을 지원합니다.</li> <li>IE6, IE7, IE8, Opera 10, Safari 5는 event.wheelDelta를 지원합니다. </li> <li>Firefox 3.5, Opera 10 지원 이벤트.상세.</li> <li>event.wheelDelta 값은 120의 배수입니다. </li> <li>event.detail 값은 3의 배수입니다.</li> </ol> <div id="J_Box01" class="box">마우스휠 이벤트: 마우스휠</div> <div id="J_Box02" class="box">마우스휠 이벤트: DOMMouseScroll </div> <p id="J_Result" class="result"></p> <p>관련 기사: <a href="http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/">http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/</a></p>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

확인 , 이제 우리는 서로 다른 브라우저 간의 구현 차이를 설명하기 위해 호환되는 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

var addEvent = (function(){
if (window.addEventListener) {
return function(el, sType, fn, Capture) {
el. addEventListener(sType, fn, (capture)) ;
};
} else if (window.attachEvent) {
return function(el, sType, fn, Capture) {
el.attachEvent( "on" sType, fn);
};
} else {
return function(){};
}
})(),
// isFirefox는 의사 코드입니다. , 직접 구현할 수 있습니다.
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// 객체도 의사 코드이므로 Mousewheel 이벤트 요소를 등록해야 합니다.
addEvent(object, mousewheel, function (event){
event = window.event | event;
// todo Something
}, false)

달성할 대화형 효과로 돌아가 보겠습니다. . 이제 해결해야 할 다른 문제가 있습니다:
1. 페이지 글꼴을 확대해야 할까요? ==> 마우스 휠이 위 또는 아래로 스크롤됩니까?
2. 페이지 글꼴 크기 조정의 배수는 무엇입니까? ==> 마우스 휠의 스크롤 범위는 어떻게 되나요?
다행히도 이벤트의 일부 속성 값을 통해 이 정보를 얻을 수 있습니다.
1. "mousewheel" 이벤트의 "event.wheelDelta" 속성 값: 반환된 값(양수인 경우) 값은 휠이 위로 스크롤되었음을 의미합니다. 음수 값이면 휠이 아래로 스크롤된다는 의미입니다. 반환된 값은 모두 120의 배수입니다. 즉, 진폭 = 반환된 값 / 120입니다.
2. "DOMMouseScroll" 이벤트의 "event.detail" 속성 값: 반환된 값. 음수 값인 경우 휠이 위쪽으로 스크롤된다는 의미입니다("event.wheelDelta"와 정반대). 양수 값이면 휠이 위쪽으로 스크롤된다는 의미입니다. 반환된 값은 모두 3의 배수입니다. 즉, 진폭 = 반환된 값/3입니다.
3. "mousewheel" 이벤트는 Opera 10의 특별한 경우입니다. 이 이벤트에는 "event.wheelDelta" 속성과 "event.detail" 속성이 모두 있습니다.
참고: 위의 세 번째 항목에 대해 "JavaScript의 onmousewheel 이벤트" 기사에 다음 설명이 있습니다.

코드 복사

코드는 다음과 같습니다.

Opera에서 "detail"은 FF와 동일한 값을 반환하므로 big O의 경우 "wheelDelta" 대신 "detail"을 사용해야 합니다. , Opera 버전에 따라 IE와 다른 값을 반환할 수 있습니다.

<script> (function(){ var addEvent = (function(){ if (window.addEventListener) { return function(el, sType, fn, capture) { el.addEventListener(sType, fn, (capture)); }; } else if (window.attachEvent) { return function(el, sType, fn, capture) { el.attachEvent("on" + sType, fn); }; } else { return function(){}; } })(), elBox01 = document.getElementById('J_Box01'), elBox02 = document.getElementById('J_Box02'), elResult = document.getElementById('J_Result'); // IE6/IE7/IE8/Opera 10+/Safari5+ addEvent(elBox01, 'mousewheel', function(event){ event = window.event || event ; elResult.innerHTML = 'This browser support <strong>mousewheel event! event.wheelDelt: <strong>' + (event.wheelDelta ? event.wheelDelta : '0') + ' event.detail: <strong>' + (event.detail ? event.detail : '0') + ''; }, false); // Firefox 3.5+ addEvent(elBox02, 'DOMMouseScroll', function(event){ event = window.event || event ; elResult.innerHTML = 'This browser support <strong>DOMMouseScroll event! event.wheelDelt: <strong>' + (event.wheelDelta ? event.wheelDelta : '0') + ' event.detail: <strong>' + (event.detail ? event.detail : '0') + ''; }, false); })(); </script>
그러나 테스트 후 Opera 9 및 Opera 10의 event.wheelDelta 속성은 다른 브라우저와 정확히 동일하게 작동하며 인터페이스 관점에서 "event.wheelDelta"를 먼저 사용해야 합니다. 코드 속성에서.
이때 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var addEvent = ( function(){
if (window.addEventListener) {
return function(el, sType, fn, Capture) {
el.addEventListener(sType, fn, (capture) );
};
} else if (window.attachEvent) {
return function(el, sType, fn, Capture) {
el.attachEvent("on" sType, fn); 🎜>};
} else {
return function(){};
}
})(),
stopEvent: function(event) {
if (event.stopPropagation) ) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
if (event.preventDefault) {
event.preventDefault(); 🎜>} else {
event.returnValue = false;
}
},
zoomIn = function(){},
zoomOut = function(){},
// isFirefox는 의사 코드이므로 직접 구현할 수 있습니다.
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// 개체는 의사 코드이므로 Mousewheel 이벤트 요소를 등록해야 합니다.
addEvent(object , mousewheel, function(event){
var delta = 0;
event = window.event || event
stopEvent(event)
delta = event.wheelDelta / 120) : (- event.detail / 3 ;