javascript_javascript 기술에서 마우스 휠 이벤트 구문 분석

모든 최신 브라우저는 마우스 휠을 지원하며 사용자가 휠을 스크롤하면 실행됩니다. 브라우저는 일반적으로 마우스 휠을 사용하여 문서를 스크롤하거나 확대/축소하지만 마우스 휠 이벤트를 취소하면 이러한 기본 동작을 방지할 수 있습니다. 스크롤 휠 이벤트에 영향을 미치는 몇 가지 상호 운용성 문제가 있지만 크로스 플랫폼 코드 작성은 여전히 ​​가능합니다. Firefox를 제외한 모든 브라우저는 "mousewheel" 이벤트를 지원하지만 Firefox는 "DOMMouseScroll"을 사용하며 초안 레벨 3 DOM 이벤트 사양에서는 "mousewheel" 대신 이벤트 이름 "wheel"을 사용할 것을 권장합니다.

document.body.onmousewheel = function(event){
  event = event || window.event;
  console.dir(event);
}

Firefox는 마우스휠을 지원하지 않습니다

document.body.addEventListener("DOMMouseScroll",function(event){
  console.dir(event);
})

다음 스크롤 휠을 아래로 스크롤하면 Chrome 및 IE9에서의 콘솔 출력입니다

다음은 스크롤 휠로 아래로 스크롤했을 때 Firefox의 콘솔 출력입니다

위 출력에서 ​​비표준 DOMMouseScroll 이벤트를 사용하여 마우스휠을 대체하고, 이벤트 객체의 세부 속성을 사용하여 WheelDetal을 대체할 수 있습니다. 다만, 디테일 속성값의 스케일링 비율과 부호가 휠Detal과 다르며, 디테일값에 -40을 곱한 값이 휠Detal값과 같습니다.

FireFox 이외의 브라우저에서 상하 스크롤은 아래의 WheelDelta와 관련이 있습니다.

테스트에 따르면 내 win7 시스템에서는 IE7, IE10, Opera12, safari5.1에 관계없이 아래로 스크롤할 때마다 event.wheelDelta 값이 -120입니다.

FireFox 브라우저(Opera 브라우저에서도 사용 가능)의 경우 마우스 스크롤 방향을 결정하는 속성은 event.detail이고 스크롤 다운 값은 3입니다.

FireFox 브라우저의 방향 판단의 양수 값과 음수 값이 다른 브라우저의 값과 반대라는 점에 유의해야 합니다. FireFox 브라우저에서 아래로 스크롤하면 양수 값이고 다른 브라우저에서는 음수 값입니다.

var isFirefox = (navigator.userAgent.indexOf("Firefox") !== -1);
if(isFirefox){
  element.addEventListener("DOMMouseScroll",wheelHandler,false);
}
element.onmousewheel = wheelHandler;
//element.onwheel = wheelHandler; //DOM3级wheel事件，经过测试IE9还是不支持，但是谷歌和火狐都支持，在谷歌内有wheelDelta在火狐里面有detail
function wheelHandler(event){ event = event || window.event; var delta = event.wheelDelta || detail*-30; }

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