JavaScript 휠 이벤트 사용 지침_javascript 기술

불행히도 모든 브라우저는 다릅니다.

1) 이벤트 이름이 다릅니다
IE, KHTML(Safari, Chrome), Opera에 해당하는 이벤트 이름은 "mousewheel"입니다. Gecko(Firefox, Netscape)에 해당하는 이벤트 이름은 "DOMMouseScroll"입니다.

2) 이벤트 객체의 속성이 다릅니다
가끔 사용자가 스크롤을 위로 올렸는지 아래로 스크롤했는지 알아야 할 때가 있습니다. 예를 들어 스크롤 이벤트에 응답하는 함수가 있습니다.

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

function WheelHandle (e) {
if(e.wheelDelta) {// IE, KHTML, Opera
alert(e.wheelDelta > 0 ? 'Scroll up' : 'Scroll down');
} else { // Gecko
alert(e.detail < 0 ? 'Scroll up' : 'Scroll down')
}
}

IE , KHTML은 e .wheelDelta를 지원합니다. 0보다 크면 위로 스크롤되고, 0보다 작으면 아래로 스크롤됩니다. Gecko는 e.detail을 지원합니다. 0보다 작으면 위로 스크롤됩니다. 0보다 크면 위로 스크롤됩니다. 반면에 Opera는 훌륭하고 두 가지를 모두 지원합니다.
다음은 참고용 휠 이벤트 등록 기능입니다.

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

/**
* 휠 이벤트 함수 등록
* @param 요소: 등록된 이벤트 객체
* @param WheelHandle: 이벤트 함수 등록
*/
function addScrollListener(element,wheelHandle) {
if(typeof element != 'object') return
if(typeofwheelHandle != 'function') return;
// 모니터 브라우저
if(typeofarges.callee.browser == 'undefine') {
var user = navigator.userAgent
var b = {};
b.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object"
b.khtml = (user.indexOf("KHTML") > -1 || user .indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !b.opera
b.ie = user.indexOf("MSIE") > - 1 && !b.opera;
b.gecko = user.indexOf("Gecko") > -1 && !b.khtml;
arguments.callee.browser = b;
if(element == window)
element = document;
if(arguments.callee.browser.ie)
element.attachEvent('onmousewheel', WheelHandle)
else
element.addEventListener(arguments.callee.browser.gecko ? 'DOMMouseScroll' : 'mousewheel', WheelHandle, false)
}

듣기 이벤트 등록:

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

var display = document.getElementById('display')
function WheelHandle(e) {
if(e.wheelDelta) {// IE, KHTML, Opera
display.innerHTML = (e.wheelDelta > 0 ? 'Up' : 'Down'); } else { // Gecko
display.innerHTML = (e.detail < 0 ? 'Up' : 'Down')
}
}
addScrollListener(window,wheelHandle)